axios请求不携带Cookie的原因

傷城~ 2022-11-12 08:18 2451阅读 0赞

axios请求默认是不携带 `Cookie` 的，如果需要携带 `Cookie` 前端需要配置

// 允许携带cookie请求
    axios.defaults.withCredentials = true

即

// 创建axios实例
    const service = axios.create({ 
    	baseURL: process.env.BASE_API, // api的base_url
    	timeout: 5000, // 请求超时时间
    	withCredentials: true
    })

同时还要确保后端配置了

Access-Control-Allow-origin= '前端请求IP地址（如果有端口带上端口）' // 不能为 * 否则跨域不生效
     Access-Control-Allow-Credentials = true

如果还是不行，后端设置 Cookie 时，需要设置 `SameSite=None;Secure`，同时后端配置 `https` 请求，因为浏览器默认 `SameSite=Lax`  
![在这里插入图片描述][20210715163731385.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70]  
**补充：如果使用了 `Mock.js` 会携带不上 Cookie**  
如果使用了mock.js，只需要在使用mock的地方设置以下代码，就可以在正常发送 cookie 了

import Mock from 'mockjs'
    Mock.XHR.prototype.withCredentials = true

如果以上都配置好了，还是不能携带 Cookie 就是浏览器的问题了。但一般情况都是后端配置跨域，和浏览器无关，因为换个浏览器就不知道情况了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70 1]  
把框选的设置为 `Disabled` 就可以了  
更新：新版 Chrome 浏览器已经没有这个选项了

[20210715163731385.png]: /images/20221022/820cd1c669044b08bb20db33e89072ad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210323092922620.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210325162558713.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1,size_16,color_FFFFFF,t_70