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

這篇文章主要講解了“vue前后端分離怎么解決每次請求session都會變的問題”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“vue前后端分離怎么解決每次請求session都會變的問題”吧！

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

感謝各位的閱讀，以上就是“vue前后端分離怎么解決每次請求session都會變的問題”的內容了，經過本文的學習后，相信大家對vue前后端分離怎么解決每次請求session都會變的問題這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！