快捷導(dǎo)航

vue axios sessionID每次請(qǐng)求都不同的原因以及修改方式

更新時(shí)間：2023年12月06日 15:28:25 作者：wxj_web

這篇文章主要介紹了vue axios sessionID每次請(qǐng)求都不同的原因以及修改方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue axios sessionID每次請(qǐng)求都不同的原因

今天應(yīng)項(xiàng)目需要，需要在請(qǐng)求當(dāng)中加入sessionID的驗(yàn)證，但是發(fā)現(xiàn)每一次發(fā)送給后臺(tái)的請(qǐng)求當(dāng)中，sessionID都是不一樣的，那么原因是什么呢？

查閱度娘之后

發(fā)現(xiàn)自己封裝的axios配置文件當(dāng)中，缺少了一行：

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

這是axios的文檔： https://www.kancloud.cn/yunye/axios/234845

 // `withCredentials` 表示跨域請(qǐng)求時(shí)是否需要使用憑證
  withCredentials: false, // 默認(rèn)的

在我封裝的axios請(qǐng)求當(dāng)中，是沒有 withCredentials的配置的，如果沒有配置為true，默認(rèn)為false則向后臺(tái)發(fā)送的請(qǐng)求當(dāng)中不攜帶cookie信息，如此每一次sessionID自然會(huì)不同。

而再加入這一行配置之后，再次測(cè)試，發(fā)現(xiàn)出現(xiàn)新的的問題：

Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:8080' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

這個(gè)時(shí)候，就需要后臺(tái)的同事幫忙了，在后臺(tái)的跨域請(qǐng)求頭配置當(dāng)中，進(jìn)行如下兩行的配置：

response.setHeader("Access-Control-Allow-Origin", "*");// 不能是通配符*

而是：

作用是將訪問接口才ip注冊(cè)進(jìn)去。

第二個(gè)配置是：

Access-Control-Allow-Credentials: true

若是不設(shè)置成這個(gè)，也會(huì)出錯(cuò)。

而這樣前后都設(shè)置完畢之后，再次請(qǐng)求，你會(huì)發(fā)現(xiàn)，還是出錯(cuò)了，那是因?yàn)?，你需要在修改一個(gè)地址

 host: 'localhost', // 這里要修改為你本機(jī)的ip地址，那少年，你就成功了
 port: 8080, // 端口
 autoOpenBrowser: false,

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

element ui table（表格）實(shí)現(xiàn)點(diǎn)擊一行展開功能
這篇文章主要給大家介紹了關(guān)于element ui table（表格）實(shí)現(xiàn)點(diǎn)擊一行展開功能的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2018-12-12
vue基于vant實(shí)現(xiàn)上拉加載下拉刷新的示例代碼
普遍存在于各種app中的上拉加載下拉刷新功能，本文主要介紹了vue基于vant實(shí)現(xiàn)上拉加載下拉刷新，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-01-01
vue實(shí)現(xiàn)指定日期之間的倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)指定日期之間的倒計(jì)時(shí)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-05-05
vue-cli4創(chuàng)建項(xiàng)目導(dǎo)入Element-UI踩過的坑及解決
這篇文章主要介紹了vue-cli4創(chuàng)建項(xiàng)目導(dǎo)入Element-UI踩過的坑及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-04-04
Vue應(yīng)用部署到服務(wù)器的正確方式
本篇文章主要介紹了詳解Vue應(yīng)用部署到服務(wù)器的正確方式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。
2017-07-07
Vue.js實(shí)現(xiàn)拖放效果的實(shí)例
這篇文章主要介紹了Vue.js實(shí)現(xiàn)拖放效果的實(shí)例的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-09-09
瀏覽器事件循環(huán)與vue nextTicket的實(shí)現(xiàn)
這篇文章主要介紹了瀏覽器事件循環(huán)（結(jié)合vue nextTicket）的實(shí)現(xiàn)方法,需要的朋友可以參考下
2019-04-04
Vue3的路由傳參方法超全匯總
vue路由傳參的使用場(chǎng)景一般都是應(yīng)用在父路由跳轉(zhuǎn)到子路由時(shí),攜帶參數(shù)跳轉(zhuǎn),下面這篇文章主要給大家介紹了關(guān)于Vue3路由傳參方法的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-04-04
vue @ ~ 相對(duì)路徑路徑別名設(shè)置方式
這篇文章主要介紹了vue @ ~ 相對(duì)路徑路徑別名設(shè)置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
VUE : vue-cli中去掉路由中的井號(hào)#操作
這篇文章主要介紹了VUE : vue-cli中去掉路由中的井號(hào)#操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-09-09