在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