?<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/開(kāi)頭改為后端返回path開(kāi)頭

修改后：

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

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

您可能感興趣的文章: