本地開發環境cookie丟失?

thekingisalwaysluc 發布于2019-08-22 15:25 / 3237人閱讀

摘要：代理響應事件，可以在這里修改響應。再貼一遍代碼修改修改此處使用了對象進行操作，遍歷，替換相應的值，刪除原來的再重新設置一遍即可。至此，我們可以在的中來進行配置，解決開發環境下丟失的問題。

問題

最近項目對接口進行安全改造,需要用到一個Path=/XXX/的cookie值,但是本地開發環境會出現cookie丟失的問題,因為本地開發環境目錄都是http://localhost:8000/home,不會包含XXX路徑,這樣請求就會丟失用于安全的cookie.

解決方案 最簡單粗暴的解決方案

修改項目目錄,添加一個XXX的文件夾，把開發環境的需要的靜態資源和頁面文件放到XXX文件夾下，開發環境下訪問項目地址改成http://localhost:8485/XXX。顯然這個方案有缺陷，如果cookie path 改變，我們又需要再次改變項目目錄結構，可能還需要修改webpack配置（或者其他打包配置）

nginx 代理的方式

如果項目本地開發環境使用了nginx代理，那么只需要一行配置就可以輕松搞定，直接上代碼

location /{
    ...
    proxy_pass http://localhost:8000;
    proxy_cookie_path /XXX/ /;
    ...
}
 
#原理是代理轉換了cookie的path，從/XXX/，轉換成/。這樣項目就不用做任何修改了。

webpack-dev-server 解決方案

了解前面兩個方案之后，我們來看看重頭戲，項目沒有使用nginx作為代理，而是使用webpack-dev-server提供的代理功能，我們改怎么來配置呢？相信比較熟悉webpack-dev-server的同學都知道webpack-dev-server可以配置proxy，其實就是個代理的配置。先看一下最終的解決方案，在webpack.config.js中配置，如下

devServer:{
    proxy: {
      "/api": {
        target: "http://localhost:8000",
        pathRewrite: {"^/api" : ""}
      }，
      onProxyRes: function(proxyRes, req, res) {
          var cookies = proxyRes.headers["set-cookie"];
          var cookieRegex = /Path=/XXX//i;
          //修改cookie Path
          if (cookies) {
            var newCookie = cookies.map(function(cookie) {
              if (cookieRegex.test(cookie)) {
                return cookie.replace(cookieRegex, "Path=/");
              }
              return cookie;
            });
            //修改cookie path
            delete proxyRes.headers["set-cookie"];
            proxyRes.headers["set-cookie"] = newCookie;
          }
        }
    }
}

由于查找了很多資料也沒有查到簡單的配置方式，我使用了onProxyRes的配置進行手動修改cookie。如果其他同學有其他簡單一些的方式，還望不吝賜教！

首先，同樣是作為代理，我的思路就是參照nignx的思路一樣，對cookie 的path進行一個轉化，這樣思路就明確了，查找配置，轉換cookie，我感覺已經離勝利很近啦。

果然我還是太年輕啊，以為剩下的事情肯定so easy了，結果我看了好幾遍官網文檔中proxy配置項，一個一個地查看，壓根找不到那一項配置可以修改cookie 的path；然后我開始尋求百度，google的幫助，就這樣查了半天，密密麻麻的瀏覽器標簽，淚崩，難道真沒辦法了？還是大神們從來不這么玩啊。。。

之后看到官網有一句話“The dev-server makes use of the powerful http-proxy-middleware package. Checkout its documentation for more advanced usages.”，茅塞頓開啊，原來更高級的使用方式可以去查看http-proxy-middleware，完整的配置大家可以自行查看和學習

此處僅僅介紹幾個配置

cookieDomainRewrite

這個配置可以重寫cookie 的domain,當看到這個配置時，眼睛都亮了，按理說也該有個cookiePathRewrite，我確認了好幾遍，確實沒有。

onProxyReq
代理請求事件，可以在這里對請求修改。

onProxyRes

代理響應事件，可以在這里修改響應。

function onProxyRes(proxyRes, req, res) {
    proxyRes.headers["x-added"] = "foobar";     // add new header to response
    delete proxyRes.headers["x-removed"];       // remove header from response
}

重點來了，看到github上的這段demo，思路就有了，利用這個事件回調我們可以對set-cookie響應頭進行重寫，替換Path值。再貼一遍代碼：

onProxyRes: function(proxyRes, req, res) {
          var cookies = proxyRes.headers["set-cookie"];
          var cookieRegex = /Path=/XXX//i;
          //修改cookie Path
          if (cookies) {
            var newCookie = cookies.map(function(cookie) {
              if (cookieRegex.test(cookie)) {
                return cookie.replace(cookieRegex, "Path=/");
              }
              return cookie;
            });
            //修改cookie path
            delete proxyRes.headers["set-cookie"];
            proxyRes.headers["set-cookie"] = newCookie;
          }
        }

此處使用了proxyRes對象進行操作，遍歷proxyRes.headers["set-cookie"]，替換相應的Path值，刪除原來的set-cookie,再重新設置一遍即可。

至此，我們可以在webpack-dev-server的proxy中來進行配置，解決開發環境下cookie丟失的問題。

參考：

https://github.com/nodejitsu/...

https://github.com/chimurai/h...

GPU云服務器云服務器本地cookies js本地cookie保存數據本地環境本地環境搭建

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/93451.html

小程序填坑實錄

摘要：注意，這里有一個坑，在開發者工具上回調是不會被調用的，只有在手機上才有效。 open-data頭像如何設置樣式設置成 { display: block; overflow: hidden; } 就可以正常設置樣式了，包括圓形頭像等用戶授權按鈕設計思路授權按鈕設計成全屏透明的，用戶點擊屏幕任意位置即可發起授權小程序中使用Promise 引用npm中的es6-promise即可；...

xiyang 2019-08-29 15:37 評論0 收藏0
瀏覽器本地存儲

摘要：瀏覽器本地存儲在較高版本的瀏覽器中，提供了和。單個保存的數據不能超過，很多瀏覽器都限制一個站點最多保存個。瀏覽器本地存儲在較高版本的瀏覽器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage來取代globalStorage html5中的Web Storage包括了兩種存儲方式：sessionStorage和loca...

oysun 2019-08-22 15:58 評論0 收藏0
HTML 面試題總結

摘要：不區分大小寫的聲明是在中，聲明引用，因為基于。標簽名必須用小寫字母。應當寫在中，以避免頁面元素由于樣式確實造成瞬間的白頁或者給用戶閃爍感。一旦遇到錯誤，立刻停止解析，并顯示錯誤信息。，，不支持，，，支持。 doctype(文檔類型) 的作用是什么？聲明文檔的解析類型(document.compatMode)，避免瀏覽器的怪異模式。有以下兩個值：怪異模式，瀏覽器使用自己的怪異模式解...

oujie 2019-08-02 10:14 評論0 收藏0
面試題總結

摘要：所以個人建議將登陸信息等重要信息存放為其他信息如果需要保留，可以放在中和屬性的異同共同點對內聯元素設置和屬性，可以讓元素脫離文檔流，并且可以設置其寬高。不同點仍會占據位置，會覆蓋文檔流中的其他元素。說說你對閉包的理解使用閉包主要是為了設計私有的方法和變量。閉包的優點是可以避免全局變量的污染，缺點是閉包會常駐內存，會增大內存使用量，使用不當很容易造成內存泄露。閉包有三個特性：函...

RiverLi 2019-08-20 17:33 評論0 收藏0