JS Cookie丟失問題
阿新 • • 發佈：2018-03-03
情況 cape 創建 aid ack else chang 訪問 localhost
JS Cookie丟失問題
前些天有人問我vue中使用proxy發送請求，為什麽請求時cookie丟失，首先說一下我對cookie的理解：
1、cookie在正常情況下是會在每次請求時自動攜帶，
2、cookie雖然是由一個網頁所創建，但並不只是創建cookie的網頁才能讀取該cookie。
在默認情況下，與創建cookie的網頁在同一目錄或子目錄下的所有網頁都可以讀取該cookie。即:
(1)如果在這個目錄下還有子目錄，要使在子目錄中也可以訪問，則需要使用path參數設置cookie，語法如下：
document.cookie="name=value; path=cookiePath";
(2)如果要使cookie在整個網站下可用，可以將cookieDir指定為根目錄，示例如下：
document.cookie="userId=320; path=/";上面所說都指的是在同一個目錄中的訪問，可是要想在不同虛擬目錄中訪問則要另外想辦法來解決這個問題。
設置路徑代碼如下：
var now=new Date()
new Date().setDate(now.getDate()+1);
var cookies="setCookies="+escape("我的cookies")+";expires="+now.toString()+";path=/";
註意:path不能解決在不同域中訪問cookie的問題。
(3) 在默認情況下，只有和設置cookie的網頁在同一個Web服務器的網頁才能訪問該網頁創建的cookie。
但可以通過domain參數來實現對其 的控制，其語法格式如下：
document.cookie="name=value; domain=cookieDomain";
設置域代碼如下：
var now=new Date()
new Date().setDate(now.getDate()+1);var cookies="userName="+escape("哈哈")+";expires="+now.toString()+";path=/; domain=.baidu.com"; 看完上面的敘述我們回到上面的疑問，不難理解vue中使用proxy時cookie丟失的原因就是path和domain,proxyTable: { ‘/api‘:{ target: ‘後臺接口地址‘, changeOrigin: true, pathRewrite: { ‘^/api‘: ‘/b‘,//註意這裏只是接口關鍵字的替換，與cookie的path無關 }, onProxyRes(proxyRes, req, res) { var oldCookie = proxyRes.headers[‘set-cookie‘] if(oldCookie== null || oldCookie.length==0){ delete proxyRes.headers[‘set-cookie‘] return } 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] } } }
如果後臺返回cookie的path是‘/b‘而本地前端本地開發地址為localhost:8080/#/home 頁面，我們需要再後端返回cookie時手動修改path路徑，代碼如下：
JS Cookie丟失問題