這篇文章給大家介紹如何在vue中使用webpack重寫(xiě)cookie路徑，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

讓客戶(hù)滿(mǎn)意是我們工作的目標(biāo)，不斷超越客戶(hù)的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶(hù)，將通過(guò)不懈努力成為客戶(hù)在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名注冊(cè)、虛擬主機(jī)、營(yíng)銷(xiāo)軟件、網(wǎng)站建設(shè)、西山網(wǎng)站維護(hù)、網(wǎng)站推廣。

Cookie詳解

Cookie在遠(yuǎn)程瀏覽器端存儲(chǔ)數(shù)據(jù)并以此跟蹤和識(shí)別用戶(hù)的機(jī)制。從實(shí)現(xiàn)上說(shuō)，Cookie是存儲(chǔ)在客戶(hù)端上的一小段數(shù)據(jù)，瀏覽器（即客戶(hù)端）通過(guò)HTTP協(xié)議和服務(wù)器端進(jìn)行Cookie交互。

Cooke獨(dú)立于語(yǔ)言存在，嚴(yán)格地說(shuō)，Cookie并不是由PHP、Java等語(yǔ)言實(shí)現(xiàn)的，而是由這些語(yǔ)言對(duì)Cookie進(jìn)行間接操作，即發(fā)送HTTP指令，瀏覽器收到指令便操作Cookie并返回給服務(wù)器。因此，Cookie是由瀏覽器實(shí)現(xiàn)和管理的。舉例說(shuō)，PHP并沒(méi)有真正設(shè)置過(guò)Cookie，只是發(fā)出指令讓瀏覽器來(lái)做這件事。PHP中可以使用setcookie() 或 setrawcookie() 函數(shù)設(shè)置Cookie。setcookie()最后一個(gè)參數(shù)HttpOnly設(shè)置了后，JavaScript就無(wú)法讀取到這個(gè)Cookie。

設(shè)置Cookie時(shí)需注意：①函數(shù)有返回值，false失敗，true成功，成功僅供參考，不代表客戶(hù)端一定能接收到；②PHP設(shè)置的Cookie不能立即生效，要等下一個(gè)頁(yè)面才能看到（Cookie從服務(wù)器傳給瀏覽器，下個(gè)頁(yè)面瀏覽器才能把設(shè)置的Cookie傳回給服務(wù)器）；如果是JavaScript設(shè)置的，是立即生效的；③Cookie沒(méi)有顯示的刪除函數(shù)，可以設(shè)置expire過(guò)期時(shí)間，自動(dòng)觸發(fā)瀏覽器的刪除機(jī)制。

Cookie是HTTP頭的一部分，即現(xiàn)發(fā)送或請(qǐng)求Cookie，才是data域；setcookie()等函數(shù)必須在數(shù)據(jù)之前調(diào)用，這和header() 函數(shù)是相同的。不過(guò)也可以使用輸出緩沖函數(shù)延遲腳本的輸出，知道設(shè)置好所有Cookie和其他HTTP標(biāo)頭。

Cookie通常用來(lái)存儲(chǔ)一些不是很敏感的信息，或者進(jìn)行登錄控制，也可用來(lái)記住用戶(hù)名、記住免密碼登錄、防止刷票等。每個(gè)域名下允許的Cookie是有限制的，根據(jù)瀏覽器這個(gè)限制也不同。Cookie不是越多越好，它會(huì)增加寬帶，增加流量消耗，所以不要濫用Cookie；不要把Cookie當(dāng)作客戶(hù)端的存儲(chǔ)器來(lái)用。一個(gè)域名的每個(gè)Cookie限制以4千字節(jié)（KB）鍵值對(duì)的形式存儲(chǔ)。

還有一種Cookie是Flash創(chuàng)建的，成為Flash Shard Object，又稱(chēng)Flash Cookie，即使清空瀏覽器所有隱私數(shù)據(jù)，這類(lèi)頑固的Cookie還會(huì)存在硬盤(pán)上，因?yàn)樗皇蹻lash管理，很多網(wǎng)站采用這種技術(shù)識(shí)別用戶(hù)。

Cookie跨域，主要是為了統(tǒng)一應(yīng)用平臺(tái)，實(shí)現(xiàn)單點(diǎn)登錄；需使用P3P協(xié)議（Platform for Privacy Preferences），通過(guò)P3P使用戶(hù)自己可以指定瀏覽器的隱私策略，達(dá)到存儲(chǔ)第三方Cookie的目的，只需要在響應(yīng)用戶(hù)請(qǐng)求時(shí)，在HTTP的頭信息中增加關(guān)于P3P的配置信息就可以了。Cookie跨域涉及兩個(gè)不同的應(yīng)用，習(xí)慣上稱(chēng)為第一方和第三方。第三方通常是來(lái)自別人的廣告、或Iframe別的網(wǎng)站的URL，這些第三方網(wǎng)站可能使用的Cookie。

好，重點(diǎn)給大家介紹vue webpack重寫(xiě)cookie路徑的方法，具體內(nèi)容如下所示：

webpack提供的反向代理服務(wù)器在開(kāi)發(fā)階段非常方便，幾行簡(jiǎn)單的代碼配置就可以使用反向代理功能，包括路徑重寫(xiě)、cookie處理等。

項(xiàng)目開(kāi)發(fā)階段使用的API路徑是 /admin ，部署到線上是 / ，所以在開(kāi)發(fā)過(guò)程中需要在 proxyTable 進(jìn)行反向代理配置，將路徑重寫(xiě)掉，路徑重寫(xiě)代碼如下( config/index.js ):

proxyTable: {
  '/admin': {
  target: 'http://127.0.0.1:8080',
  changeOrigin: true,
  pathRewrite: {
   '^/admin': '/admin2'
  },
  }
}

啟動(dòng)項(xiàng)目之后進(jìn)行登錄，此時(shí)API請(qǐng)求成功，但是獲取登錄用戶(hù)信息時(shí)發(fā)現(xiàn)cookie沒(méi)有帶過(guò)去。查看請(qǐng)求發(fā)現(xiàn)登錄請(qǐng)求的 Set-Cookie 響應(yīng)頭中的 Path 是 /admin2 。但是咱們請(qǐng)求的路徑是 /admin ，cookie當(dāng)然不會(huì)生效。

查閱文檔發(fā)現(xiàn)，proxyTable支持 onProxyRes 回調(diào)函數(shù)來(lái)自定義響應(yīng)，流程是通過(guò)替換后端服務(wù)器設(shè)置的 cookie-path 來(lái)進(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是什么

Vue是一套用于構(gòu)建用戶(hù)界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫(kù)只關(guān)注視圖層，方便與第三方庫(kù)和項(xiàng)目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫(kù)開(kāi)發(fā)復(fù)雜的單頁(yè)應(yīng)用。

關(guān)于如何在vue中使用webpack重寫(xiě)cookie路徑就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。