按理说设置cookie是后端返回给设置的,但是项目需求,要前端请求获取到用户token,然后写在cookie里,再携带cookie调用其他请求接口。

首先需要在axios添加的就是

axios.defaults.withCredentials = true;

这个懂的都懂,网上一搜就有,关于携带cookie都会让你配这个属性。

然后用js写入cookie,这时候问题来了,cookie已经写入,但是接口并没有携带cookie。
解决axios前端设置cookie跨域不携带的问题插图
解决axios前端设置cookie跨域不携带的问题插图(1)

这时候可以看看cookie的domain,是否发生了跨域:
解决axios前端设置cookie跨域不携带的问题插图(2)
domain的域名必须是接口请求地址的域名或子域名才可以携带,如果不是,在写入cookie时要手动设置一下。比如接口地址域名是abc.def.cn,那么domain需要是abc.def.cn或者.def.cn

如果使用js-cookie组件,用以下代码设置:

Cookies.set('cookieName', 'cookieValue', { domain: '.def.cn' });

如果用原生js写入,在键值对的字符串里加入domain:

document.cookie = "cookieName=" + 'cookieValue' + ';domain=' + '.def.cn';

然后请求就携带cookie了。

本站无任何商业行为
个人在线分享 » 解决axios前端设置cookie跨域不携带的问题
E-->