axios前端訪問后端攜帶cookie的代碼實(shí)例

更新時間：2024年09月29日 08:37:06 作者：冼紫菜

當(dāng)用戶在網(wǎng)站登錄后,服務(wù)器會在其瀏覽器上設(shè)置一個包含登錄信息的Cookie,通過這個Cookie,服務(wù)器能夠識別用戶是否已登錄,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

當(dāng)用戶登錄時，服務(wù)器會在用戶的瀏覽器上設(shè)置一個Cookie，該Cookie包含了用戶的登錄信息（如用戶名和ID）。這樣，當(dāng)用戶瀏覽網(wǎng)站時，服務(wù)器可以檢查這個Cookie是否存在，以此來確定用戶是否已登錄。用戶登錄后將記錄設(shè)置cookie，后面的每次訪問都將攜帶cookie作為憑證。

在axios配置文件中，添加下面的代碼

import axios from 'axios';

const myAxios = axios.create({
    baseURL: 'http://localhost:8080/api',
    withCredentials: true
})

myAxios.defaults.withCredentials=true; // 向后臺發(fā)送請求時攜帶憑證

export default myAxios;

設(shè)置之后，在其他組件飲用myAxios向后端發(fā)送請求就能夠攜帶cookie了。

跨域問題解決

前端設(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來源
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") // 允許的請求方法
                .maxAge(3600) // 預(yù)檢請求的有效期
                .allowCredentials(true); // 允許攜帶憑證
    }
}

這樣，前端向服務(wù)器發(fā)送請求就攜帶上cookie了

總結(jié)

到此這篇關(guān)于axios前端訪問后端攜帶cookie的文章就介紹到這了,更多相關(guān)axios前端訪問后端帶cookie內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue+vite+diff.js使用小結(jié)
本文主要介紹了vue+vite+diff.js使用小結(jié),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-12-12
vue中調(diào)用HTTP請求的詳細(xì)步驟
這篇文章主要介紹了vue中調(diào)用HTTP請求的詳細(xì)步驟,文中通過代碼示例給大家講解的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定幫助,需要的朋友可以參考下
2024-07-07
vue 通過 mqtt 實(shí)現(xiàn)實(shí)時接收消息的操作方法
?MQTT是一種基于發(fā)布/訂閱模式的輕量級消息協(xié)議,適用于硬件性能有限的遠(yuǎn)程設(shè)備和網(wǎng)絡(luò)狀況不佳的環(huán)境,這篇文章主要介紹了vue 通過 mqtt 實(shí)現(xiàn)實(shí)時接收消息,需要的朋友可以參考下
2024-12-12
vue3項(xiàng)目中各個文件的作用詳細(xì)介紹
在Vue3項(xiàng)目中,通常會有以下一些常見的目錄和文件,下面這篇文章主要給大家介紹了關(guān)于vue3項(xiàng)目中各個文件的作用,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-09-09
一文搞懂Vue3.2中setup語法糖使用
在vue3版本中，引入了一個新的函數(shù)，叫做setup。本文將通過實(shí)例為大家詳細(xì)講講Vue3.2中setup語法糖的使用，感興趣的小伙伴可以了解一下
2022-07-07
使用canvas實(shí)現(xiàn)一個vue彈幕組件功能
這篇文章主要介紹了使用canvas實(shí)現(xiàn)一個vue彈幕組件功能,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-11-11
vue.js+boostrap項(xiàng)目實(shí)踐(案例詳解)
這篇文章主要介紹了vue.js+boostrap項(xiàng)目實(shí)踐(案例詳解)的相關(guān)資料,本文圖文并茂介紹的非常詳細(xì)，具有參考借鑒價值，需要的朋友可以參考下
2016-09-09
Vue實(shí)現(xiàn)五子棋小游戲
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)五子棋小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-05-05
Vuex 命名空間 namespaced的使用
本文主要介紹了Vuex 命名空間 namespaced的使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-03-03
vue使用echarts實(shí)現(xiàn)動態(tài)數(shù)據(jù)的示例詳解
這篇文章主要為大家詳細(xì)介紹了vue如何使用echarts實(shí)現(xiàn)動態(tài)數(shù)據(jù),文中的示例講解詳細(xì),具有一定的借鑒價值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-11-11