這篇文章給大家介紹如何在vue中使用webpack重寫cookie路徑，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
Cookie詳解
Cookie在遠(yuǎn)程瀏覽器端存儲數(shù)據(jù)并以此跟蹤和識別用戶的機制。從實現(xiàn)上說，Cookie是存儲在客戶端上的一小段數(shù)據(jù)，瀏覽器（即客戶端）通過HTTP協(xié)議和服務(wù)器端進(jìn)行Cookie交互。
Cooke獨立于語言存在，嚴(yán)格地說，Cookie并不是由PHP、Java等語言實現(xiàn)的，而是由這些語言對Cookie進(jìn)行間接操作，即發(fā)送HTTP指令，瀏覽器收到指令便操作Cookie并返回給服務(wù)器。因此，Cookie是由瀏覽器實現(xiàn)和管理的。舉例說，PHP并沒有真正設(shè)置過Cookie，只是發(fā)出指令讓瀏覽器來做這件事。PHP中可以使用setcookie() 或 setrawcookie() 函數(shù)設(shè)置Cookie。setcookie()最后一個參數(shù)HttpOnly設(shè)置了后，JavaScript就無法讀取到這個Cookie。
設(shè)置Cookie時需注意：①函數(shù)有返回值，false失敗，true成功，成功僅供參考，不代表客戶端一定能接收到；②PHP設(shè)置的Cookie不能立即生效，要等下一個頁面才能看到（Cookie從服務(wù)器傳給瀏覽器，下個頁面瀏覽器才能把設(shè)置的Cookie傳回給服務(wù)器）；如果是JavaScript設(shè)置的，是立即生效的；③Cookie沒有顯示的刪除函數(shù)，可以設(shè)置expire過期時間，自動觸發(fā)瀏覽器的刪除機制。
Cookie是HTTP頭的一部分，即現(xiàn)發(fā)送或請求Cookie，才是data域；setcookie()等函數(shù)必須在數(shù)據(jù)之前調(diào)用，這和header() 函數(shù)是相同的。不過也可以使用輸出緩沖函數(shù)延遲腳本的輸出，知道設(shè)置好所有Cookie和其他HTTP標(biāo)頭。
Cookie通常用來存儲一些不是很敏感的信息，或者進(jìn)行登錄控制，也可用來記住用戶名、記住免密碼登錄、防止刷票等。每個域名下允許的Cookie是有限制的，根據(jù)瀏覽器這個限制也不同。Cookie不是越多越好，它會增加寬帶，增加流量消耗，所以不要濫用Cookie；不要把Cookie當(dāng)作客戶端的存儲器來用。一個域名的每個Cookie限制以4千字節(jié)（KB）鍵值對的形式存儲。
還有一種Cookie是Flash創(chuàng)建的，成為Flash Shard Object，又稱Flash Cookie，即使清空瀏覽器所有隱私數(shù)據(jù)，這類頑固的Cookie還會存在硬盤上，因為它只受Flash管理，很多網(wǎng)站采用這種技術(shù)識別用戶。
Cookie跨域，主要是為了統(tǒng)一應(yīng)用平臺，實現(xiàn)單點登錄；需使用P3P協(xié)議（Platform for Privacy Preferences），通過P3P使用戶自己可以指定瀏覽器的隱私策略，達(dá)到存儲第三方Cookie的目的，只需要在響應(yīng)用戶請求時，在HTTP的頭信息中增加關(guān)于P3P的配置信息就可以了。Cookie跨域涉及兩個不同的應(yīng)用，習(xí)慣上稱為第一方和第三方。第三方通常是來自別人的廣告、或Iframe別的網(wǎng)站的URL，這些第三方網(wǎng)站可能使用的Cookie。
好，重點給大家介紹vue webpack重寫cookie路徑的方法，具體內(nèi)容如下所示：
webpack提供的反向代理服務(wù)器在開發(fā)階段非常方便，幾行簡單的代碼配置就可以使用反向代理功能，包括路徑重寫、cookie處理等。
項目開發(fā)階段使用的API路徑是 /admin ，部署到線上是 / ，所以在開發(fā)過程中需要在 proxyTable 進(jìn)行反向代理配置，將路徑重寫掉，路徑重寫代碼如下( config/index.js ):
重慶分公司
重慶分公司
proxyTable: {
'/admin': {
target: 'http://127.0.0.1:8080',
changeOrigin: true,
pathRewrite: {
'^/admin': '/admin2'
},
}
}啟動項目之后進(jìn)行登錄，此時API請求成功，但是獲取登錄用戶信息時發(fā)現(xiàn)cookie沒有帶過去。查看請求發(fā)現(xiàn)登錄請求的 Set-Cookie 響應(yīng)頭中的 Path 是 /admin2 。但是咱們請求的路徑是 /admin ，cookie當(dāng)然不會生效。
查閱文檔發(fā)現(xiàn)，proxyTable支持 onProxyRes 回調(diào)函數(shù)來自定義響應(yīng)，流程是通過替換后端服務(wù)器設(shè)置的 cookie-path 來進(jìn)行處理，代碼如下：
proxyTable: {
'/admin': {
target: 'http://127.0.0.1:8080',
changeOrigin: true,
pathRewrite: {
'^/admin': '/lesson/admin'
},
onProxyRes: function (proxyRes, req, res){
const cookies = proxyRes.headers['set-cookie']
if (cookies) {
const newCookies = cookies.map(cookie=> {
return cookie.replace(/Path=\/admin2/, 'Path=/')
})
delete proxyRes.headers['set-cookie']
proxyRes.headers['set-cookie'] = newCookies
}
}
},
},Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫只關(guān)注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。
關(guān)于如何在vue中使用webpack重寫cookie路徑就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
