在基於vue的webpack腳手架開發中使用了代理轉發，結果瀏覽器發出的請求中不帶cookie致使登陸時老是session失效怎麼辦？

環境：

    

 

    有2個業務接口須要轉發到82的服務器上：

    ../user/getCode.do

    ../user/doLogin.do

現象：

    

    使用上述的2個接口實現用戶登陸功能，首先顯示登陸頁面，調用../user/getCode.do獲取驗證碼，而後用戶界面輸入用戶名、密碼和驗證碼，點擊登陸以後調用../user/doLogin.do接口實現登陸。結果../user/doLogin.do後端老是找不到驗證碼，由於瀏覽器沒有把cookie中的JSESSIONID傳遞過來。沒法登陸的話，後續的全部其餘接口都沒法調用了。

分析：

    經過chrome的network，能夠看到以下信息：

    那麼如今的問題就是爲何在點擊當即登陸以後，瀏覽器爲何沒有在請求中帶上上次返回的cookie信息呢？

    仔細看response header中的set-cookie頭能夠發現，其中有一個Path=/webserver/，說明這個cookie是有適用範圍的。只能在/webserver/路徑下使用

    

     而咱們代碼中使用的路徑是這麼寫的：      ../user/getCode.do，沒有包含webserver信息，這樣瀏覽器天然就認爲這個請求和上次返回的那個cookie不匹配。

解決方法：

    解決方法有2中：

    一種是在請求的時候帶上/webserver/前綴，好比把上文的 ../user/getCode.do改成  ../webserver/user/getCode.do；

    第二種是修改代理的實現，把82服務器上返回的http頭上的set-cookie內的Path改成  Path=/，代碼以下。

    在vue的webpack腳手架中的build/dev-server.js內的  Object.keys(proxyTable).forEach(function (context)  的實現改成以下形式

   
   
   
   

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

   
   
   
   
Object.keys(proxyTable).forEach(function (context) { var options = proxyTable[context] if (typeof options === 'string') { options = {  target: options, onProxyRes(proxyRes, req, res) { //set-cookie:JSESSIONID=6F766ED2EEEBEAA9245F7F908A848857; Path=/webserver/; HttpOnly  var oldCookie = proxyRes.headers['set-cookie'] if(oldCookie== null || oldCookie.length==0){ delete proxyRes.headers['set-cookie'] return } console.log(oldCookie) var oldCookieItems = oldCookie[0].split(';') var newCookie = '' for(var i=0; i < oldCookieItems.length; ++i){ if(newCookie.length >0) newCookie += ';' if(oldCookieItems[i].indexOf('Path=') >= 0) newCookie += 'Path=/' else newCookie += oldCookieItems[i] } proxyRes.headers['set-cookie'] = [newCookie] //proxyRes.headers['x-addedygc'] = 'foobar'; // add new header to response  //delete proxyRes.headers['connection']; // remove header from response  } } } app.use(proxyMiddleware(context, options))})

    

結論：

    通過試驗，以上2種方法都適用，問題解決。

    

 

 

 

來自爲知筆記(Wiz)