問題

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

詳細問題

使用Vue+SpringBoot進行項目開發(fā)，axios進行網(wǎng)絡(luò)請求，發(fā)送請求，請求頭信息不包含Cookie信息
具體如下
實際效果

預(yù)期效果

解決方案

作用域

Vue項目全局配置

打開Vue項目的入口文件（通常是main.js）$\to$ 新增如下配置

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

對于筆者而言，即

Vue項目中的components或views配置

打開Vue項目中的components或views文件$\to$在components或views中的$<Script></Script>$頭部新增如下配置

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

對于筆者而言，即

Vue項目中的components或views中的請求方法下

找到Vue項目中的components或views中的請求方法$\to$在方法中增加如下配置

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

對于筆者而言，即

產(chǎn)生原因

問題的產(chǎn)生原因是由于跨域請求的限制，導(dǎo)致axios發(fā)送的請求頭信息不包含Cookie。具體的，在瀏覽器的安全策略中，跨域請求默認是不會發(fā)送Cookie的?？缬蛘埱笫侵盖岸舜a所在的域與后端API所在的域不一致，包括域名、端口或協(xié)議的差異。由于安全性考慮，瀏覽器會在默認情況下阻止跨域請求攜帶Cookie，以防止?jié)撛诘陌踩L險。

解決原因

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

參考文獻

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

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