• 欢迎访问大姚哥前端笔记
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧
  • 欢迎留言o(∩_∩)o 哈哈

记一次Axios跨域需依赖cookie解决方法

Vue dayaoge 806次浏览

最近在折腾VUE,一般跨域问题服务端设置响应头

Access-Control-Allow-Origin:*

即可解决,或者再Chrome安装个插件:“Access-Control-Allow-Origin:*”也是可以访问成功的。

但这只能解决一部分请求。一些依赖cookie的接口则调用不成功。
服务端Access-Control-Allow-Origin需要设置位具体的域名,不能设置为“*”。
这样我们就想到修改本机hosts,模拟一个域名。
然后修改Vue项目中,
config/index.js中的端口和host

    host: 'example.io', // can be overwritten by process.env.HOST
    port: 80, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: true,

本机hosts文件添加:

127.0.0.1 example.io

后端添加Access-Control-Allow-Origin:example.io
总结一下:
前端:
1、修改hosts
2、修改vue config/index.js配置
3、添加axios配置:axios.defaults.withCredentials = true;
后端设置头
1、

Access-Control-Allow-Origin:example.io

2、

response.setHeader("Access-Control-Allow-Credentials", "true");

到这基本上就可以了。

另外Mac上设置了hosts和config中的port之后依然无法在80端口打开。是因为在MAC下启动1024以下的端口,需要使用root模式,也就是sudo。
使用sudo npm run dev运行项目即可。


小白公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明记一次Axios跨域需依赖cookie解决方法
喜欢 (2)