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

最近項(xiàng)目對(duì)接口進(jìn)行安全改造,需要用到一個(gè)Path=/XXX/的cookie值,但是本地開發(fā)環(huán)境會(huì)出現(xiàn)cookie丟失的問題,因?yàn)楸镜亻_發(fā)環(huán)境目錄都是http://localhost:8000/home,不會(huì)包含XXX路徑,這樣請(qǐng)求就會(huì)丟失用于安全的cookie.

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

如果項(xiàng)目本地開發(fā)環(huán)境使用了nginx代理，那么只需要一行配置就可以輕松搞定，直接上代碼

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

了解前面兩個(gè)方案之后，我們來看看重頭戲，項(xiàng)目沒有使用nginx作為代理，而是使用webpack-dev-server提供的代理功能，我們改怎么來配置呢？相信比較熟悉webpack-dev-server的同學(xué)都知道webpack-dev-server可以配置proxy，其實(shí)就是個(gè)代理的配置。先看一下最終的解決方案，在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;
          }
        }
    }
}

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

首先，同樣是作為代理，我的思路就是參照nignx的思路一樣，對(duì)cookie 的path進(jìn)行一個(gè)轉(zhuǎn)化，這樣思路就明確了，查找配置，轉(zhuǎn)換cookie，我感覺已經(jīng)離勝利很近啦。

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

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

此處僅僅介紹幾個(gè)配置

cookieDomainRewrite

這個(gè)配置可以重寫cookie 的domain,當(dāng)看到這個(gè)配置時(shí)，眼睛都亮了，按理說也該有個(gè)cookiePathRewrite，我確認(rèn)了好幾遍，確實(shí)沒有。

onProxyReq
代理請(qǐng)求事件，可以在這里對(duì)請(qǐng)求修改。

onProxyRes

代理響應(yīng)事件，可以在這里修改響應(yīng)。

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

重點(diǎn)來了，看到github上的這段demo，思路就有了，利用這個(gè)事件回調(diào)我們可以對(duì)set-cookie響應(yīng)頭進(jìn)行重寫，替換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對(duì)象進(jìn)行操作，遍歷proxyRes.headers["set-cookie"]，替換相應(yīng)的Path值，刪除原來的set-cookie,再重新設(shè)置一遍即可。

至此，我們可以在webpack-dev-server的proxy中來進(jìn)行配置，解決開發(fā)環(huán)境下cookie丟失的問題。

參考：

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

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