問(wèn)題

axios 發(fā)送請(qǐng)求請(qǐng)求頭信息不包含Cookie信息

詳細(xì)問(wèn)題

使用Vue+SpringBoot進(jìn)行項(xiàng)目開(kāi)發(fā)，axios進(jìn)行網(wǎng)絡(luò)請(qǐng)求，發(fā)送請(qǐng)求，請(qǐng)求頭信息不包含Cookie信息
具體如下
實(shí)際效果

預(yù)期效果

解決方案

作用域

Vue項(xiàng)目全局配置

打開(kāi)Vue項(xiàng)目的入口文件（通常是main.js）$\to$ 新增如下配置

import axios from 'axios';
axios.defaults.withCredentials = true;

對(duì)于筆者而言，即

Vue項(xiàng)目中的components或views配置

打開(kāi)Vue項(xiàng)目中的components或views文件$\to$在components或views中的$<Script></Script>$頭部新增如下配置

import axios from 'axios';
axios.defaults.withCredentials = true;

對(duì)于筆者而言，即

Vue項(xiàng)目中的components或views中的請(qǐng)求方法下

找到Vue項(xiàng)目中的components或views中的請(qǐng)求方法$\to$在方法中增加如下配置

axios.get('/api/data', {withCredentials: true
}).then(response => {// 處理響應(yīng)數(shù)據(jù)}).catch(error => {// 處理錯(cuò)誤});

對(duì)于筆者而言，即

產(chǎn)生原因

問(wèn)題的產(chǎn)生原因是由于跨域請(qǐng)求的限制，導(dǎo)致axios發(fā)送的請(qǐng)求頭信息不包含Cookie。具體的，在瀏覽器的安全策略中，跨域請(qǐng)求默認(rèn)是不會(huì)發(fā)送Cookie的。跨域請(qǐng)求是指前端代碼所在的域與后端API所在的域不一致，包括域名、端口或協(xié)議的差異。由于安全性考慮，瀏覽器會(huì)在默認(rèn)情況下阻止跨域請(qǐng)求攜帶Cookie，以防止?jié)撛诘陌踩L(fēng)險(xiǎn)。

解決原因

在前端項(xiàng)目中，通過(guò)配置axios的withCredentials屬性為true，告訴axios在跨域請(qǐng)求中攜帶Cookie?？梢栽谌峙渲?、組件級(jí)別的配置或單個(gè)請(qǐng)求方法中進(jìn)行設(shè)置。
全局配置：在Vue項(xiàng)目的入口文件（如main.js）中設(shè)置axios.defaults.withCredentials = true，使所有的axios請(qǐng)求都攜帶Cookie。
組件級(jí)別的配置：在組件中的$<script>$標(biāo)簽中引入axios，并設(shè)置axios.defaults.withCredentials = true，使該組件中的所有axios請(qǐng)求都攜帶Cookie。
單個(gè)請(qǐng)求方法配置：在特定的axios請(qǐng)求方法中，通過(guò)配置項(xiàng)withCredentials: true來(lái)單獨(dú)設(shè)置該請(qǐng)求攜帶Cookie。

參考文獻(xiàn)

產(chǎn)生原因以及解決原因參考chatgpt

原創(chuàng)不易
轉(zhuǎn)載請(qǐng)標(biāo)明出處
如果對(duì)你有所幫助 別忘啦點(diǎn)贊支持哈