如何在vue中使用webpack重寫cookie路徑

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

Cookie詳解

Cookie在遠程瀏覽器端存儲數據并以此跟蹤和識別用戶的機制。從實現上說，Cookie是存儲在客戶端上的一小段數據，瀏覽器（即客戶端）通過HTTP協議和服務器端進行Cookie交互。

Cooke獨立于語言存在，嚴格地說，Cookie并不是由PHP、Java等語言實現的，而是由這些語言對Cookie進行間接操作，即發送HTTP指令，瀏覽器收到指令便操作Cookie并返回給服務器。因此，Cookie是由瀏覽器實現和管理的。舉例說，PHP并沒有真正設置過Cookie，只是發出指令讓瀏覽器來做這件事。PHP中可以使用setcookie() 或 setrawcookie() 函數設置Cookie。setcookie()最后一個參數HttpOnly設置了后，JavaScript就無法讀取到這個Cookie。

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

Cookie是HTTP頭的一部分，即現發送或請求Cookie，才是data域；setcookie()等函數必須在數據之前調用，這和header() 函數是相同的。不過也可以使用輸出緩沖函數延遲腳本的輸出，知道設置好所有Cookie和其他HTTP標頭。

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

還有一種Cookie是Flash創建的，成為Flash Shard Object，又稱Flash Cookie，即使清空瀏覽器所有隱私數據，這類頑固的Cookie還會存在硬盤上，因為它只受Flash管理，很多網站采用這種技術識別用戶。

Cookie跨域，主要是為了統一應用平臺，實現單點登錄；需使用P3P協議（Platform for Privacy Preferences），通過P3P使用戶自己可以指定瀏覽器的隱私策略，達到存儲第三方Cookie的目的，只需要在響應用戶請求時，在HTTP的頭信息中增加關于P3P的配置信息就可以了。Cookie跨域涉及兩個不同的應用，習慣上稱為第一方和第三方。第三方通常是來自別人的廣告、或Iframe別的網站的URL，這些第三方網站可能使用的Cookie。

好，重點給大家介紹vue webpack重寫cookie路徑的方法，具體內容如下所示：

webpack提供的反向代理服務器在開發階段非常方便，幾行簡單的代碼配置就可以使用反向代理功能，包括路徑重寫、cookie處理等。

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

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

啟動項目之后進行登錄，此時API請求成功，但是獲取登錄用戶信息時發現cookie沒有帶過去。查看請求發現登錄請求的 Set-Cookie 響應頭中的 Path 是 /admin2 。但是咱們請求的路徑是 /admin ，cookie當然不會生效。

查閱文檔發現，proxyTable支持 onProxyRes 回調函數來自定義響應，流程是通過替換后端服務器設置的 cookie-path 來進行處理，代碼如下：

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是一套用于構建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區別是，使用Vue可以自底向上逐層應用，其核心庫只關注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態系統支持的庫開發復雜的單頁應用。

關于如何在vue中使用webpack重寫cookie路徑就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。