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