vue开发不同代理方式设置cookies

vue开发不同代理方式设置cookies

1，使用vue-cli 2.x脚手架开发配置

找到项目中的config文件夹下的index.js文件，dev对象内有一个proxyTable的配置项。

 dev: {
   	env: require('./dev.env'),
    port: 8888,
    host: '0.0.0.0',
    autoOpenBrowser: false,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      "/dev": {
        target: "http://10.33.26.136:9111", //设置调用的接口域名和端口号 
        changeOrigin: true
      }
    },
    /**
     * Source Maps
     */
    // https://webpack.js.org/configuration/devtool/#development
    devtool: "cheap-module-eval-source-map",
    // If you have problems debugging vue-files in devtools,
    // set this to false - it *may* help
    // https://vue-loader.vuejs.org/en/options.html#cachebusting
    cacheBusting: true,
 
    cssSourceMap: true
  }

Cookies 解决方案
当项目开启单点登陆时，需要在接口加上cookies和token

2，使用vue-cli 3.x脚手架开发配置

Vue CLI 提供了一个 proxy 选项，用来代理接口转发流量。我们可以在根目录下新增 vue.config.js 文件，添加如下的配置：

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

简写：

Cookies 解决方案
解决 Cookies 只需要在登录时将 Vue CLI Proxy 代理的 API 返回头部中 Cookies 写到本地域下。之后再请求其他接口时，读取请求头里面的 Cookies 的值，并附带在实际请求接口的头部，就完成了我们的设想。

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://10.66.32.68',
        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])
            })
          }
        }
      }
    }
  }
}