本地開發環境cookie丟失?

問題

最近項目對接口進行安全改造,須要用到一個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...