axios前端訪問(wèn)后端攜帶cookie的代碼實(shí)例
當(dāng)用戶登錄時(shí)，服務(wù)器會(huì)在用戶的瀏覽器上設(shè)置一個(gè)Cookie，該Cookie包含了用戶的登錄信息（如用戶名和ID）。這樣，當(dāng)用戶瀏覽網(wǎng)站時(shí)，服務(wù)器可以檢查這個(gè)Cookie是否存在，以此來(lái)確定用戶是否已登錄。用戶登錄后將記錄設(shè)置cookie，后面的每次訪問(wèn)都將攜帶cookie作為憑證。
在axios配置文件中，添加下面的代碼
import axios from 'axios';
const myAxios = axios.create({
baseURL: 'http://localhost:8080/api',
withCredentials: true
})
myAxios.defaults.withCredentials=true; // 向后臺(tái)發(fā)送請(qǐng)求時(shí)攜帶憑證
export default myAxios;
設(shè)置之后，在其他組件飲用myAxios向后端發(fā)送請(qǐng)求就能夠攜帶cookie了。
跨域問(wèn)題解決
前端設(shè)置攜帶憑證之后，后端需要設(shè)置允許跨域和攜帶憑證信息，這里以Java的springboot配置為例
@Configuration
public class WebConfig implements WebMvcConfigurer {
/**
* 跨域配置
* @param registry
*/
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("http://localhost:3000") // 允許本機(jī)端口3000來(lái)源
.allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") // 允許的請(qǐng)求方法
.maxAge(3600) // 預(yù)檢請(qǐng)求的有效期
.allowCredentials(true); // 允許攜帶憑證
}
}
這樣，前端向服務(wù)器發(fā)送請(qǐng)求就攜帶上cookie了
總結(jié)
到此這篇關(guān)于axios前端訪問(wèn)后端攜帶cookie的文章就介紹到這了,更多相關(guān)axios前端訪問(wèn)后端帶cookie內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue基于input實(shí)現(xiàn)密碼的顯示與隱藏功能
這篇文章主要介紹了vue基于input實(shí)現(xiàn)密碼的顯示與隱藏功能,文末給大家介紹了vue?如何實(shí)現(xiàn)切換密碼的顯示與隱藏效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-01-01
vue-router動(dòng)態(tài)設(shè)置頁(yè)面title的實(shí)例講解
今天小編就為大家分享一篇vue-router動(dòng)態(tài)設(shè)置頁(yè)面title的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Vue中Key唯一標(biāo)識(shí)作用小結(jié)
key是虛擬DOM的導(dǎo)航儀,通過(guò)唯一標(biāo)識(shí)節(jié)點(diǎn),提高DOM更新效率,不綁定key或使用不穩(wěn)定的key會(huì)導(dǎo)致組件狀態(tài)錯(cuò)亂、性能下降,甚至崩潰,下面就來(lái)介紹一下Vue中Key唯一標(biāo)識(shí)作用,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2026-02-02
開發(fā)一個(gè)Parcel-vue腳手架工具(詳細(xì)步驟)
這篇文章主要介紹了開發(fā)一個(gè)Parcel-vue腳手架工具(詳細(xì)步驟)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了vue data中如何獲取使用store中的變量，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
深入理解Vue keep-alive及實(shí)踐總結(jié)
這篇文章主要介紹了深入理解Vue keep-alive及實(shí)踐總結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
elementUI給el-tabs/el-tab-pane添加圖標(biāo)效果實(shí)例
這篇文章主要給大家介紹了關(guān)于elementUI給el-tabs/el-tab-pane添加圖標(biāo)效果實(shí)例的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用elementUI具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-07-07
Vue?的核心功能之一在于?props?的使用,props?是我們?cè)?Vue?中從父組件到子組件傳遞數(shù)據(jù)的方式,但并非所有?props?都是一樣的,本文我們會(huì)深入學(xué)習(xí)這三種不同類型的?props,看看它們有何不同,以及何時(shí)使用它們,需要的朋友可以參考下2024-03-03
Vue+Element的后臺(tái)管理框架的整合實(shí)踐
本文主要介紹了Vue+Element的后臺(tái)管理框架，在框架上，領(lǐng)導(dǎo)要用AdminLTE這套模板，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
vue-cli項(xiàng)目?jī)?yōu)化方法- 縮短首屏加載時(shí)間
這篇文章主要介紹了vue-cli項(xiàng)目?jī)?yōu)化 縮短首屏加載時(shí)間,需要的朋友可以參考下2018-04-04