作者:杨彩清(追求极致,热爱技术和生活的 95 后)
本文讲述如何使用 fetch 下的 request 方法的 mode 属性值 no-cors 消除本地开发过程中跨域的错误提示,以及开发中遇到的 SameSite Cookie 问题及其解决方法。
使用 fetch 下的 request 方法支持的 mode 属性值 no-cors 消除本地开发过程中跨域的错误提示。
A 系统是以嵌入 JS 脚本的方式在 B 系统下工作的。A 系统的埋点需要设置一些和个人信息有关的公共字段,这些字段需要通过访问 B 系统的后端接口拿到,而本地开发调试的过程中域名为 localhost,导致调试过程中存在跨域的问题,控制台一直有红色 Error 。
通过 http-proxy 代理请求。
问题:
需要增加额外的 webpackdevServer 的配置,其他的代理都针对有相对固定路径的 api,代理到 mock 调试地址或者测试环境地址。单独的为个别接口增加代理设置不算是一个好的解决方案,可扩展性也不好。
并且 webpackdevServer 代理到 B 系统过程还会重定向到登录页
if (isDev) {
//不执行埋点的请求
} else {
// 执行请求
}
问题:
发布到 B-test 测试环境时,还是会有跨域到 B 后端接口的报错
不过本地开发看不到红色错误警告了,相对而言可接受
禁掉跨域的请求,只在同域的情况下发请求。
Request 是 fetch 下的一个 api,一般很少会显式的用到
// 一般情况下使用 fetch
fetch('url', {
//config
}).then...
// 使用 request 的情况下使用 fetch
const request = new Request('url', {
//config
})
fetch(request)...
Request 下有一些参数,也就是上面代码块的 config 可以配置的参数,包括 cache
、 credentials
、headers
等等,重点用到的参数是 mode
。
mode: {'same-origin', 'no-cors', 'cors', ...} 设置跨域请求响应是否有效
same-origin
要求必须同源,否则抛出错误, network 没有请求发出
cors
允许跨域请求发出,响应是否可用依赖服务端设置,network 有请求发出
no-cors
跨域请求不会发送,无法读取 response,network 没有请求发出
浏览器兼容性:chrome 浏览器基本都支持,其他浏览器可参考: https://developer.mozilla.org/en-US/docs/Web/API/Request
Chrome 80 在 2020 年 2 月后把 cookie 的 same-site 属性默认设置从 None 改为 Lax,对一些系统之间需要相互嵌入且需要同步 cookie 的场景造成了影响;短期的办法可以通过更改浏览器设置来处理。
允许 cross-site 的 Request 携带 3rd-party Cookie,这样在 C 系统嵌入(例如使用 iframe)其他 D 系统的页面,登录后可以正常访问把 cookie 带到对 D 的 request 上,可以正常访问。
不允许 cross-site 的 Request 携带 3rd-party Cookie,这样导致无法在 C 系统直接访问内嵌的 D 系统;但是通过 a,link 等顶层的链接是可以携带 3rd-party Cookie 的。
不允许 cross-site 的 Request 携带 3rd-party Cookie ;通过 a, link 等顶层链接也无法携带 Cookie
C 系统内有一些 iframe 内嵌了 D 系统(一款在线文档编辑系统)的文档,最近有个别用户反馈在 C 里没有权限查看内嵌的文档,一直跳转到 D 系统的登录页面,重复登录也不管用,点击链接跳转到浏览器打开才能正常使用。
排查过程中发现控制台有相关报警
短期:chrome 设置中关闭把默认的 cookie 的 sameSite 设置为 lax 的设置
长期:前后端完成对 cookie 的改造,显示的声明会在 cross-site 场景使用到的 cookie 的 SameSite 属性值。
字节跳动商业化前端团队招人啦!可以每日与技术网红畅谈理想、参加技术大牛交流分享、享受一日四餐、顶级极客装备、免费健身房,与优秀的人做有挑战的事情,这种地方哪里找?快来加入我们吧!
简历投递(base64ed):eWFuZ2NhaXFpbmdAYnl0ZWRhbmNlLmNvbQ==