?<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,這樣每次取請求后端,就不會被認為是不同用戶導(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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: