vue如何使用proxyTable实现多重跨域

众所周知，vue跨域有很多种解决方案，这里主要讲述一下使用proxyTable时遇到的一些问题

vue环境：脚手架cli3.0
本地地址：http://localhost:96
修改文件：vue.config.js

module.exports = {
    devServer: {
        proxy: {
            'aaa': { //跨域标识
				target: 'http://www.aaa.com/', //跨域地址
                changeOrigin: true, //是否允许跨域
                pathRewrite: {
                    '^/aaa': '' //跨域地址重写
                }
            },
            'bbb': { //跨域标识
				target: 'http://www.bbb.com/', //跨域地址
                changeOrigin: true, //是否允许跨域
                pathRewrite: {
                    '^/bbb': '' //跨域地址重写
                }
            },
        },
    },
}

跨域标识：跨域配置的基本标识，必填，可自定义
使用 axios.get('/aaa/api/getuser') 时，真实的请求地址就是http://www.aaa.com/api/getuser
使用 axios.get('/bbb/api/getuser') 时，真实的请求地址就是http://www.bbb.com/api/getuser

pathRewrite： '^/aaa': ''冒号前面的字母必须跟跨域标识一致，否则跨域失败，后面的内容可以自定义
'^/aaa': ''为空时，真实的请求地址为http://www.aaa.com/api/getuser
'^/aaa': 'zdy'不为空时，真实的请求地址为http://www.aaa.com/zdy/api/getuser

有一点需要注意，不管怎么设置，我们在浏览器控制台里看到的请求地址还是http://localhost:96/aaa/api/getuser

那么问题来了，我们在使用脚手架开发时，会涉及到一个开发环境和生产环境的全局配置

axios.defaults.baseURL = process.env.NODE_ENV === 'production' ? '/' : '/aaa';

这段代码的含义是当处于开发环境时，使用axios.get('/api/getuser')时等于在地址前面加上’/aaa‘变成axios.get('/aaa/api/getuser') ，由于这是全局配置，不能去修改，所以我们想要跨域请求www.bbb.com时使如果用axios.get('bbb/api/getuser')，那真实地址会变成http://www.aaa.com/bbb/api/getuser，解决代码如下

module.exports = {
    devServer: {
        proxy: {
            'aaa/bbb': { //跨域标识
				target: 'http://www.bbb.com/', //跨域地址
                changeOrigin: true, //是否允许跨域
                pathRewrite: {
                    '^/aaa/bbb': '' //跨域地址重写
                }
            },
            'aaa': { //跨域标识
				target: 'http://www.aaa.com/', //跨域地址
                changeOrigin: true, //是否允许跨域
                pathRewrite: {
                    '^/aaa': '' //跨域地址重写
                }
            },
        },
    },
}

因为存在全局配置axios.defaults.baseURL = process.env.NODE_ENV === 'production' ? '/' : '/aaa';那么
使用 axios.get('/api/getuser') 时会变成axios.get('aaa/api/getuser') ，因为存在’aaa‘，程序会执行第二个配置，真实的请求地址就是http://www.aaa.com/api/getuser
使用 axios.get('/bbb/api/getuser') 时会变成axios.get('aaa/bbb/api/getuser') ，因为存在’aaa/bbb‘，程序会执行第一个配置，真实的请求地址就是http://www.bbb.com/api/getuser

需要注意的的是两个配置的顺序不能改，因为代码的执行顺序是由上而下的，如果’aaa‘放在上面，'aaa/bbb'在下面，那么使用
axios.get('/bbb/api/getuser')时程序就会判断第一个配置符合条件然后执行第一个配置变成axios.get('aaa/bbb/api/getuser'),最终真实请求地址还是http://www.aaa.com/bbb/api/getuser

以上代码都是建立在本地环境的基础上，打包上线后则需要使用nginx配合了，如有误欢迎指正。