ToB企服应用市场:ToB评测及商务社交产业平台

标题: iframe里的请求无法携带cookie问题解决（纯前端） [打印本页]

作者: 河曲智叟 时间: 2024-11-24 06:14
标题: iframe里的请求无法携带cookie问题解决（纯前端）
问题形貌

现在有两个页面，A通过iframe的方式嵌入B，当在A页面点击B页面的按钮发送网络请求时，发现请求并没有携带cookie，导致后端无法获取相应的信息。
但是直接通过B页面发起请求则可以正常携带cookie
找了好几个解决方案，均是要修改后端返回或者更改nginx设置，然而在企业的开辟环境中这么做的沟通成本是比较高的，这里分享一个纯前端的解决方案。

解决方案

正常环境下cookie会在发送请求的时间默认携带，而由于欣赏器的同源战略，通过iframe发送的请求默认是无法携带cookie的，此时须要我们手动设置cookie内里的内容。

export const request: RequestConfig = {
requestInterceptors: [
(url: string, options) => {
const queryParams = new URLSearchParams(location.search);
const accessToken = queryParams.get('token') || Cookie.get('accessToken');
options.headers = {
...options.headers,
'system-code': channel || 'wechatBusiness',
'Authorization' : accessToken
};
document.cookie = `accessToken=${accessToken}; secure; SameSite=None`
options.params = { ...options.params, t: Date.now() };
return { url, options };
},
],
}

复制代码

这里在B项目中添加了一个请求拦截器，关键就是这一句
document.cookie = `accessToken=${accessToken}; secure; SameSite=None`

改造后的结果如下：

解释

1. Secure

界说：Secure 属性指示欣赏器仅在 HTTPS 连接中发送该 Cookie。这意味着 Cookie 不会在不安全的 HTTP 连接中传输，从而降低了被中间人攻击（MITM）或窃听的风险。
用法：当您在设置 Cookie 时，可以添加 Secure 属性来确保 Cookie 只通过安全渠道发送。

2. SameSite=None

界说：SameSite 属性用来控制 Cookie 在跨站请求中的发送行为。SameSite=None 体现该 Cookie 可以在跨站请求中被发送，无论是 GET 还是 POST 请求。
用法：SameSite=None 必须与 Secure 一起使用，因为从 Chrome 及其他现代欣赏器开始，只有在确保通过 HTTPS 发送的环境下，SameSite=None 的 Cookie 才会被答应。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)