vue之proxyTable代理超全面配置流程

前言

用了vue有一年多了，从最初的摸着石头过河到现在已经能熟练的使用vue开发项目，学到了许多，特别是vue的代理配置让我眼前一亮，甚是喜欢，故将自己对proxytable代理配置整理出来，供致力于的开源的同辈浏览，望大家手下留情，哈哈_。

介绍

vue的proxytable是用于开发阶段配置跨域的工具，可以同时配置多个后台服务器跨越请求接口，其真正依赖的npm包是http-proxy-middleware，在github上拥有更丰富的配置，按需配置咯。

配置分离

我将代理配置抽离出2个配置文件

1. config.dev.js

用于配置后端服务器地址、端口和ip等

2. proxytablehandler.js

用于添加代理的配置项

config.dev.js如下

/*
* 开发环境服务器配置
* @author: wujiang
* @date: 2018-08-16 11:32:36
* @last modified by: wujiang
* @last modified time: 2018-08-18 23:04:34
*/
module.exports = {
   // 开发环境代理服务器
   devproxy: {
       host: '0.0.0.0', // ip/localhost都可以访问
       port: 8080
   },
   // 后端服务器地址
   servers: {
     default: 'http://localhost:8081/springboot-girl',
     jsp: 'http://localhost:8082/springboot-jsp'
   }
}

proxytablehandler.js如下

/*
 * 开发环境代理配置 生产环境请使用 nginx 配置代理 或 其他方式
 * @author: wujiang
 * @date: 2018-08-16 17:16:55
 * @last modified by: wujiang
 * @last modified time: 2018-08-19 09:18:18
 */
const configdev = require('../config.dev')
module.exports = (() => {
	let proxyapi = {}
    let servers = configdev.servers
    for (let key of object.keys(servers)) {
        proxyapi[`/${key}`] = {
            // 传递给http(s)请求的对象
            target: servers[key],
            // 是否将主机头的源更改为目标url
            changeorigin: true,
            // 是否代理websocket
            ws: true,
            // 是否验证ssl证书
            secure: false,
            // 重写set-cookie标头的域，删除域名
            cookiedomainrewrite: '',
            // 代理响应事件
            onproxyres: onproxyres,
            // 重写目标的url路径
            pathrewrite: {
                [`^/${key}`]: ''
            }
        }
    }
    return proxyapi
})()
/**
 * 过滤cookie path，解决同域下不同path,cookie无法访问问题
 * （实际上不同域的cookie也共享了）
 * @param proxyres
 * @param req
 * @param res
 */
function onproxyres (proxyres, req, res) {
  let cookies = proxyres.headers['set-cookie']
  // 目标路径
  let originalurl = req.originalurl
  // 代理路径名
  let proxyname = originalurl.split('/')[1] || ''
  // 开发服url
  let server = configdev.servers[proxyname]
  // 后台工程名
  let projectname = server.substring(server.lastindexof('/') + 1)
  // 修改cookie path
  if (cookies) {
      let newcookie = cookies.map(function (cookie) {
          if (cookie.indexof(`path=/${projectname}`) >= 0) {
              cookie = cookie.replace(`path=/${projectname}`, 'path=/')
              return cookie.replace(`path=//`, 'path=/')
          }
          return cookie
      })
      // 修改cookie path
      delete proxyres.headers['set-cookie']
      proxyres.headers['set-cookie'] = newcookie
  }
}

使用方式 config/index.js

const configdev = require('./config.dev')
module.exports = {
	dev: {
    // paths
    assetssubdirectory: 'static',
    assetspublicpath: '/',
    proxytable: proxytablehandler,
    // various dev server settings
    host: configdev.devproxy.host, // can be overwritten by process.env.host
    port: configdev.devproxy.port, // can be overwritten by process.env.port, if port is in use, a free one will be determined
    autoopenbrowser: false,
    erroroverlay: true,
    notifyonerrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
    // use eslint loader?
    // if true, your code will be linted during bundling and
    // linting errors and warnings will be shown in the console.
    useeslint: true,
    // if true, eslint errors and warnings will also be shown in the error overlay
    // in the browser.
    showeslinterrorsinoverlay: false,
    /**
     * 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
  }
}

效果如下

以/jsp开头的api

以/default开头的api

至此配置代理成功！

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。