国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

本地開發(fā)環(huán)境cookie丟失?

thekingisalwaysluc / 3230人閱讀

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

問題

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

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

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

nginx 代理的方式

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

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

了解前面兩個方案之后，我們來看看重頭戲，項目沒有使用nginx作為代理，而是使用webpack-dev-server提供的代理功能，我們改怎么來配置呢？相信比較熟悉webpack-dev-server的同學(xué)都知道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。如果其他同學(xué)有其他簡單一些的方式，還望不吝賜教！

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

果然我還是太年輕啊，以為剩下的事情肯定so easy了，結(jié)果我看了好幾遍官網(wǎng)文檔中proxy配置項，一個一個地查看，壓根找不到那一項配置可以修改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.”，茅塞頓開啊，原來更高級的使用方式可以去查看http-proxy-middleware，完整的配置大家可以自行查看和學(xué)習(xí)

此處僅僅介紹幾個配置

cookieDomainRewrite

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

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

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
}

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

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

參考：

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/93451.html

相關(guān)文章

  • 小程序填坑實錄

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

    xiyang 評論0 收藏0

  • 瀏覽器本地存儲

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

    oysun 評論0 收藏0

  • HTML 面試題總結(jié)

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

    oujie 評論0 收藏0

  • 面試題總結(jié)

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

    RiverLi 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<