快捷導(dǎo)航

vue前后端分離如何解決每次請求session都會變的問題

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

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

vue前后端分離每次請求session都會變

因為前后端屬于不同的域,導(dǎo)致每次ajax請求服務(wù)器都會當(dāng)做新的用戶訪問,導(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請求,我用的axios 在axios的index.js全局配置

axios.defaults.withCredentials=true;

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

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

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

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

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

我是用的axios，只需在封裝的請求時添加

axios.defaults.withCredentials=true;

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

withCredentials：true；請求時攜帶cookie

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

后端返回cookie

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

cookie后面還有一個path=/xxx/ 即后端項目路徑，

只需要在為解決跨域設(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/': '/'
? ? ? ? }
? ? ? }
? ? }
? }

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

您可能感興趣的文章: