本地开发chrome无法携带cookie的解决办

最新推荐文章于 2024-01-11 10:56:19 发布

schurmi

最新推荐文章于 2024-01-11 10:56:19 发布

阅读量1.6k

点赞数

分类专栏：前端开发文章标签： javascript vue.js 前端

本文链接：https://blog.youkuaiyun.com/helloschurmi/article/details/123234974

版权

前端开发专栏收录该内容

15 篇文章

订阅专栏

针对Chrome最新版（91+）强制禁用第三方cookie导致的跨域问题，本文介绍了两种解决方案：一是利用Vue的vue.config.js设置API代理，二是修改本地host文件实现同源策略规避。这两种方法对于Vue项目在开发阶段处理跨域请求有所帮助。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

修改浏览器配置

低版本的Chrome浏览器例如89版修改SameSite 的解决办法网上有很多；但是对于最新版，大于91版本发现chrome貌似强制禁用第三方cookie了，这就导致开发的时候，使用cookie的项目，访问不同域没有办法携带cookie，暂时没有好的解决办法

vue使用代理

在使用vue-cli3版本可以在vue.config.js中添加代理到本地

 devServer: {
    proxy: {
        '/api': {
            target: 'http://api.com',  // 后台接口域名
            changeOrigin: true,  //是否跨域
            pathRewrite:{
                '^/api':''
            }
        }
    }
}

修改本机host文件

由于cookie的同源安全机制（域名，协议，端口均相同），导致会出现跨域问题，根据原理可以修改本机的host文件添加同源地址到本机
host目录地址 C:\Windows\System32\drivers\etc
添加 127.0.0.1 aaa.bbb.cn
访问时将localhost 改成 aaa.bbb.cn即可