在基於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)