在vue-cli@3.X中配置代理解決開發環境的跨域問題的同時解決cookie問題--Cookies 解決方案

使用 VueJS 大多是為了前后端分離，提高開發效率。如果 API 采用 OAuth 或者類似在請求頭部添加一個鍵值的方式，只需要解決跨域就行了。如果是采用 Cookies 授權，相對來說就比較麻煩了。早期我們采用了 Nginx 反代，保證 VueJS 開發地址和后端接口在同一個域下的方法，可以實現但是相對來說很麻煩。

Vue CLI Proxy

Vue CLI 提供了一個 proxy 選項，用來代理接口轉發流量。我們可以在根目錄下新增 vue.config.js 文件，添加如下的配置：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://mufeng.me',
        changeOrigin: true
      }
    }
  }
}

 

現在在本地請求 http://127.0.0.1:8080/api/movies 就會被自動轉發到 https://mufeng.me/api/movies ，這樣就免去了在服務端設置跨域。

解決 Cookies 只需要在登錄時將 Vue CLI Proxy 代理的 API 返回頭部中 Cookies 寫到本地 http://127.0.0.1:8080 這個域下。之后再請求其他接口時，讀取請求頭里面的 Cookies 的值，並附帶在實際請求接口的頭部，就完成了我們的設想。

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://mufeng.me',
        changeOrigin: true,
        onProxyReq (proxyReq, req, res) {
          originHost = req.headers['x-forwarded-for']
          const cookie = req.headers['cookie']
          if (cookie) {
            proxyReq.setHeader('cookie', cookie)
          }
        },
        onProxyRes(proxyRes, req, res) {
          if (proxyRes.headers['set-cookie']) {
            // 域名信息與實際業務相關
            proxyRes.headers['set-cookie'] = proxyRes.headers['set-cookie'].map(v => {
              return v.replace('domain=.mufeng.me', 'domain=' + originHost.split(':')[0])
            })
          }
        }
      }
    }
  }
}

 

Update 2019-07-05

http-proxy-middleware 自帶了 overridde cookie 的設置選項，只需要添加設置即可：原文

module.exports = {

  devServer: {
    proxy: {
      '/api': {
        target: 'https://mufeng.me',
        changeOrigin: true,
        cookieDomainRewrite: {
          'mufeng.me': '127.0.0.1'
        }
      }
    }
  }
}

原文參考鏈接：https://mufeng.me/post/vue-cli-3-local-agent-and-cross-domain