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

Posted on by

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

因為前後端屬於不同的域,導致每次ajax請求服務器都會當做新的用戶訪問,導致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,這樣每次取請求後端,就不會被認為是不同用戶導致session丟失.哦瞭!

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

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

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

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

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

axios.defaults.withCredentials=true;

根據自己代碼做相應改變就行，請求時添加withCredentials屬性，並且值為true。

withCredentials：true；請求時攜帶cookie

2、本地測試時結果發現還是無法成功,後端獲取的sessionId為null

後端返回cookie

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

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

隻需要在為解決跨域設置代理時

原代碼：

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/': '/'
        }
      }
    }
  }

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。 

推薦閱讀：