Fetch.请求作者：杨采青（追求极致的95后，热爱技术和生活）本文介绍如何使用fetch下请求方式的mode属性值no-cors消除本地开发时的跨域错误提示，以及asSameSiteCookie开发过程中遇到的问题及解决方法。遇到的问题是系统A通过嵌入JS脚本工作在系统B下。A系统的埋点需要设置一些与个人信息相关的公共字段。这些字段需要通过访问系统B的后台接口获取，而本地开发调试过程中域名为localhost，导致调试过程中出现跨域问题，控制台一直显示红色错误。解决方案1、使用webpackdevServer通过http-proxy代理请求。问题：需要增加额外的webpackdevServer配置，其他代理针对路径相对固定的API，代理到mock调试地址或测试环境地址。单独为个别接口添加代理设置不是一个好的解决方案，扩展性不好。而webpackdevServer代理到B系统的进程也会重定向到登录页面2.区分开发线上环境执行请求if(isDev){//不执行埋入请求}else{//执行请求}问题:PublishtoB-在测试测试环境时，仍然会出现跨域到B后端接口报错；不过本地开发并没有看到红色的错误提示，还是比较可以接受的。3、使用Request的mode参数控制跨域处理，禁用跨域对于域请求，只发送同域请求。知识点Request是fetch下的一个api，很少显式使用//一般使用fetchfetch('url',{//config}).then...//在使用request时使用fetchconstrequest=newRequest('url',{//config})fetch(request)...Request下有一些参数，也就是上面代码块的config可以配置的参数，包括cache，credentials，headers，等。使用的关键参数是模式。mode:{'same-origin','no-cors','cors',...}设置跨域请求响应是否有效same-origin要求同源，否则会报错，网络不通requestcors允许跨域请求发送，响应是否可用取决于服务器设置。如果网络有请求发送no-cors，则不会发送跨域请求，也无法读取响应。网络没有要发送的请求。浏览器兼容性：Chrome浏览器基本支持，其他浏览器请参考https://developer.mozilla.org...关于SameSiteCookieChrome80将在2020年2月后将cookie的same-site属性的默认设置从None改为Lax.一些系统需要嵌入和同步cookie的场景产生了影响；可以通过更改浏览器设置来解决短期问题。SameSiteCookieSameSite=None允许跨站Requests携带3rd-partycookies，使得C系统嵌入（例如使用iframe）其他D系统页面，登录后可以正常访问。将cookie带入请求给D并正常访问。SameSite=Lax不允许跨站Request携带3rd-partycookies，导致无法在C系统中直接访问嵌入式D系统；但是，第3方cookie可以通过顶级链接（例如a和链接）携带。SameSite=strict不允许跨站Request携带3rd-partycookies；a和link等顶级链接不能携带cookie。背景C系统的一些iframe中嵌入了D系统（在线文档编辑系统）的文档，最近有用户反映在C系统没有权限查看内嵌文档，总是跳转到D系统的登录页面。重复登录不起作用。点击链接跳转到浏览器打开即可正常使用。在调查中，我们找到了解决方案短期：在chrome设置中将默认的cookiesameSite设置为松懈长期：前后端完成对cookie的改造，显示的语句将使用跨站场景下cookie的sameSite属性值，参考链接：https://developer.mozilla.org...https://medium.com/@azure8205...（需要vpn，简体中文为更好）招聘字节跳动商业前端团队招聘中！每天与科技达人畅谈理想，与科技达人参与交流分享，享受一日四餐、顶级极客装备、免费健身房，与优秀的人一起做有挑战性的事情。你在哪里可以找到这样的地方？加入我们！简历投递邮箱：sunyunchao@bytedance.com
