欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-03-28 13:41:33
...

众所周知,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配合了,如有误欢迎指正。