webpack提供的反向代理服務(wù)器在開(kāi)發(fā)階段非常方便，幾行簡(jiǎn)單的代碼配置就可以使用反向代理功能，包括路徑重寫(xiě)、cookie處理等。

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

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

啟動(dòng)項(xiàng)目之后進(jìn)行登錄，此時(shí)API請(qǐng)求成功，但是獲取登錄用戶信息時(shí)發(fā)現(xiàn)cookie沒(méi)有帶過(guò)去。查看請(qǐng)求發(fā)現(xiàn)登錄請(qǐng)求的Set-Cookie響應(yīng)頭中的Path是/admin2。但是咱們請(qǐng)求的路徑是/admin，cookie當(dāng)然不會(huì)生效。

查閱文檔發(fā)現(xiàn)，proxyTable支持onProxyRes回調(diào)函數(shù)來(lái)自定義響應(yīng)，流程是通過(guò)替換后端服務(wù)器設(shè)置的cookie-path來(lái)進(jìn)行處理，代碼如下：

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
          }
    }
  },
},

重啟webpack之后重新登錄，發(fā)現(xiàn)cookie的路徑已經(jīng)被重寫(xiě)到/了。