Vue Webpack 重寫cookie路徑

webpack提供的反向代理服務器在開發階段很是方便，幾行簡單的代碼配置就能夠使用反向代理功能，包括路徑重寫、cookie處理等。

項目開發階段使用的API路徑是 /admin，部署到線上是/，因此在開發過程當中須要在proxyTable進行反向代理配置，將路徑重寫掉，路徑重寫代碼以下(config/index.js):

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

啓動項目以後進行登陸，此時API請求成功，可是獲取登陸用戶信息時發現cookie沒有帶過去。查看請求發現登陸請求的Set-Cookie響應頭中的Path是/admin2。可是我們請求的路徑是/admin，cookie固然不會生效。

查閱文檔發現，proxyTable支持onProxyRes回調函數來自定義響應，流程是經過替換後端服務器設置的cookie-path來進行處理，代碼以下：

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以後從新登陸，發現cookie的路徑已經被重寫到/了。