Vue-cli項目在開發環境下跨域請求失敗的解決方法

最近在進行畢業設計的開發,採用了Express+Vue的前後端分離
結構.並使用了基於webpack的vue-cli腳手架工具.前兩天在開發用戶權限模塊時,發現session丟失狀況,導致登錄狀態無法保持. 以下是發現問題的過程

1. 登錄後發現已經保存的session值丟失
2. 發現登錄後的請求對應的sessionId與登錄請求中的sessionId不同.
3. 查看http請求內容後發現,登錄之後的請求中並沒有包含cookies
4. 在瀏覽器中查看Cookies文件,發現隨着之前登錄請求的相應存儲在瀏覽器中的Cookies記錄,其Origin值並非服務端的域,而是客戶端的域.

至此發現問題.其實我們使用的構建工具便相當於一個服務器,對於http請求這個服務器進行了代理,於是所存儲的Cookies的域便是客戶端的域而不是服務端的域.在之後的請求中,瀏覽器在Cookies記錄中並沒有發現與請求域相匹配的Cookies記錄,自然沒有在請求中攜帶任何Cookies信息.服務端便會爲這次請求創建新的session,自然就訪問不到之前存儲的session了.

解決這個問題有兩種方案:
1. 在服務端res對象中單獨設置Header,指定客戶端的域:

res.header(“Access-Control-Allow-Credentials”,”true”);
res.header(“Access-Control-Allow-Origin”,”http://localhost:8086“);

2.通過配置地址映射表
在config/index.js中,將dev.proxyTable這一項的值設置爲引入的地址映射表:

//proxy.js
module.exports = {
 proxy: {
    '/login': { 
      target: 'http://127.0.0.1:8082',
      changeOrigin: true, 
      pathRewrite: {
        '^/login': '/login'  
      }
    }
 }
}

該表的作用是將/login直接映射到http://127.0.0.1:8082/login.其中參數changeOrigin:true會使得本地會虛擬一個代理服務接收請求並代你發送該請求,從而解決跨域問題.