快捷導(dǎo)航

vue前后端分離如何解決每次請(qǐng)求session都會(huì)變的問(wèn)題

更新時(shí)間：2022年08月05日 17:15:21 作者：CahierX

這篇文章主要介紹了vue前后端分離如何解決每次請(qǐng)求session都會(huì)變的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue前后端分離每次請(qǐng)求session都會(huì)變

因?yàn)榍昂蠖藢儆诓煌挠?導(dǎo)致每次ajax請(qǐng)求服務(wù)器都會(huì)當(dāng)做新的用戶訪問(wèn),導(dǎo)致session丟失

解決方法

?<system.webServer>
? ? <httpProtocol>
? ? ? <customHeaders>
? ? ? ? <add name="Access-Control-Allow-Origin" value="http://localhost:8080" />
? ? ? ? <add name="Access-Control-Allow-Headers" value="Content-Type" />
? ? ? ? <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
? ? ? ? <add name="Access-Control-Allow-Credentials" value="true"/>
? ? ? </customHeaders>
? ? </httpProtocol>
? <handlers>
</system.webServer>

在后端Web.config添加允許跨域,

<add name="Access-Control-Allow-Origin" value="http://localhost:8080" />

這里的value寫前端的地址

再就是改前端ajax請(qǐng)求,我用的axios 在axios的index.js全局配置

axios.defaults.withCredentials=true;

這句話的意思是每次請(qǐng)求都帶上cookie,這樣每次取請(qǐng)求后端,就不會(huì)被認(rèn)為是不同用戶導(dǎo)致session丟失.哦了!

vue前后端分離session丟失,前端解決方式

背景：前端每次發(fā)送的ajax都是形成新的會(huì)話，本地測(cè)試時(shí)后端獲取sessionId為null

**********后端的代碼修改請(qǐng)查找其他文章，本文只涉及前端

1、解決前端每次發(fā)送的ajax都是形成新的會(huì)話

我是用的axios，只需在封裝的請(qǐng)求時(shí)添加

axios.defaults.withCredentials=true;

根據(jù)自己代碼做相應(yīng)改變就行，請(qǐng)求時(shí)添加withCredentials屬性，并且值為true。

withCredentials：true；請(qǐng)求時(shí)攜帶cookie

2、本地測(cè)試時(shí)結(jié)果發(fā)現(xiàn)還是無(wú)法成功,后端獲取的sessionId為null

后端返回cookie

Set-Cookie: SESSION=NzgyMDdjZDgtNjJhMC00NmNkLTkxNWYtNjE4ZmRkYmFlOWQy; Path=/xxx/;

cookie后面還有一個(gè)path=/xxx/ 即后端項(xiàng)目路徑，

只需要在為解決跨域設(shè)置代理時(shí)

原代碼：

devServer: {
? ? proxy: {
? ? ? '/dev-api/': {
? ? ? ? target: 'http://baidu.com:8811',
? ? ? ? changOrigin: true,
? ? ? ? pathRewrite: {
? ? ? ? ? '^/dev-api/': '/'
? ? ? ? }
? ? ? }
? ? }
? }

以/dev-api/開頭改為后端返回path開頭

修改后：

devServer: {
? ? proxy: {
? ? ? '/xxx/': {
? ? ? ? target: 'http://baidu.com:8811',
? ? ? ? changOrigin: true,
? ? ? ? pathRewrite: {
? ? ? ? ? '^/xxx/': '/'
? ? ? ? }
? ? ? }
? ? }
? }

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

您可能感興趣的文章: