问题：
在本地调试的时候，希望在请求中携带登录后接口responder header中返回的cookie，但是一直不成功。
原因：
为了安全性，非同源的请求，就是无法获取到接口中返回的cookie。
解决方案：
设置axios.defaults.withCredentials = true，再将代码打包放到服务器端同域名下就可以在请求的时候自动携带上后端在接口中返回的cookie。
虽然这样是解决了问题，但是本地开发调试非常不方便。不可能每次都写完后打包放到服务器上再调试吧！那有没有办法在本地调试的时候携带上cookie呢？当然有！
解决方案
网上有文章写道让后端修改请求的response header里cookie的http only为false即可让web端请求头里自动带上cookie，这个方法我没有试过，不知道效果如何，读者可自行实验，有结果的可以给我留言哦~。
方案一 写死cookie
首先设置代理，在vue.config.js中设置好请求代理，使本地请求可以跨域请求。
这部分暂不赘述，读者请自行查找资料，设置好。
然后axios.defaults.withCredentials = true这句代码依然要写。
最后我们将cookie写死在本地，这样请求的时候会将本地的cookie自动携带在请求头中。
本地写死cookie代码：
方式一：代码写死cookie
下面就在本地写入了三条cookie，需要注意的是，如果一条cookie中，有多条信息，比如还有一个过期时间和path需要在多条信息之间添加分号+空格来隔开。
并且过期时间需要用GTM格式添加，其他格式无法写入。
// UTC时间格式
var dateStr = '2021-11-22T04:25:32.000Z'
// UTC转为date
var date = new Date(Date.parse(dateStr))
document.cookie = 'api=abcdefg;'
document.cookie = 'token=1234567;'
document.cookie = 'identity=adddfewwerwerwf;' + ' path=/;' + ' expires=' + date.toGMTString() + ';'
方式二：在浏览器中设置cookie
打开chrom浏览器
1.检查元素打开调试栏
2.点击application
3.点击左侧storage->cookies
4.在右边双击即可添加一条cookie
image.png
方案二 修改设备的host
1.打开终端
2.输入sudo vi /etc/hosts
3.输入密码
4.进入文件hosts，然后按“i”，进入编辑模式
5.把你的host添加到最后
6.control+c推出编辑模式
7.输入:wq，保存退出
下图是修改了127.0.0.1本机地址的host为 dev.xxxx.com, xxxx就是服务器的一级域名
image.png
修改成功后，再访问就 不用http://localhost:8080/ios-h5/dist/这样的链接，改为我们修改过host的链接 http://dev.xxxx.com:8080/ios-h5/dist/访问
我们随便打开一个刚才web请求的接口，可以看到接口host已经改变了
image.png
因为请求已经变成同域名下，所以cookie可以自动带上
手机端修改host参考： https://zhuanlan.zhihu.com/p/25390876
网友评论