解决方案原文
这个我试了下是谷歌浏览器做了限制，在edge上可以正常登录
我遇到这种情况主要是我的项目用的是cookie存储的登录状态。需要设置cookie的域名，使其在嵌入的网站和网站域名下都能访问cookie，但是我设置了还是没用。
我最终的解决方式是将cookie存储状态改成了localStorage存储方式。
问题描述
以iframe标签嵌入一个现有的项目到网站中，嵌入的项目无法正常登录，直接在浏览器地址栏输入url并登录是正常的。
问题分析
由于后续接口提示401，判断是登录接口鉴权失败导致的，原因是没有显式设置cookie的samesite属性，导致被默认为Lax，又因为响应的接口属于非顶层导航的跨站请求，浏览器将其屏蔽了！
SameSite属性
该属性一般是随着Set-Cookie响应头设置的，语法为response.setHeader(“Set-Cookie”,“CookieName=CookieValue;SameSite=propValue”)，表示该cookie是否可以携带在跨站请求中，可以取三个值：文章来源：https://www.toymoban.com/news/detail-426102.html
- Strict，表示完全禁止第三方 Cookie，跨站点时，任何情况下都不会发送 Cookie。
- Lax，大多数情况下不发送第三方 Cookie，但是导航到目标网址的 Get 等请求除外
-
None，表示关闭跨站限制，但是需要显式设置Secure属性并配置https
如果不设置，浏览器会默认为Lax。正如上文所提到的。
解决方案文章来源地址https://www.toymoban.com/news/detail-426102.html
- 保证两者的网址一样（域名，测试发现同一主域名下不同的子域名也是可以的）。
- 主动设置SameSite为Set-Cookie:Key=Value;SameSite=None;Secure,确保协议为安全协议https
- 禁用浏览器对SameSite的默认配置（只会对未设置的SameSite属性有效）
到了这里，关于踩坑vue中嵌套iframe项目，嵌套在iframe中的项目无法登录！的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
