vue项目打包后proxyTable代理失效问题及解决

vue项目打包后proxyTable代理失效

原因

在vue.config.js中配置了proxy跨域后执行npm run build打包部署到服务器上会报跨域问题，为什么会报错呢？因为编译打包后，前端页面成为了单独的静态资源，代理服务器devServer.proxy被抽离出去了。

也就是说，devServer.proxy不会一起打包到dist文件夹下，所以相当于我们没有配置代理服务器！！

怎么解决呢？资源要被访问，那必须要有一个代理服务器来装载它。我们部署上线最常见的就是使用nginx进行反向代理，只需要修改nginx配置文件即可。

解决方案

示例如下：

第一步、找到项目的配置文件。

第二步、在其中添加下面这段代码，根据自己实际情况修改即可：

location /api{
        rewrite ^.+api/?(.*)$ /$1 break;    
        //可选参数，正则验证地址
        include uwsgi_params;    
        //可选参数，uwsgi是服务器和服务端应用程序的通信协议，规定了怎么把请求转发给应用程序和返回
        proxy_pass http://www.test.com;    
        // 接口地址
}

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配合了。 

总结

这些仅为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

最新评论