vue开发模式反向代理配置

大家在做vue开发的时候难免会遇到跨域的问题，一般解决的办法有两种，后端配置cors，大部分框架都集成了相应的配置文件，另一种就是前段设置反向代理，而笔者今天要说的就是vue生产模式的反向代理。

vue cli 2.x:

proxyTable: {
      // proxy all requests starting with /api to jsonplaceholder
      '/api': {
        target: 'http://localhost:1337',      //目标服务器,注意要到端口号
        changeOrigin: true,						//是否跨域
        pathRewrite: {
          '^/api': ''                                      //重写api使得 /api/login -> http://localhost:1337/login等等，这里好多csdn博主跟我的不一样，可能个人喜好问题，只要映射到相应的url就行了
        }
      }
    },

vue cli 3.x:

先安装一个插件

yarn add @cnamts/vue-cli-plugin-proxy # OR npm install @cnamts/vue-cli-plugin-proxy

//vue.config.js 注意是在根目录下
module.exports = {
    pluginOptions: {
        proxy: {
            enabled: true,
            context: '/api',
            options: {
                target: 'http://localhost:3000',
                changeOrigin: true,
                ws:true,                                            //websocket
                pathRewrite:{
                    '^/api':''
                }
            }
        }
    }
}
//配置跟2.x差不多就不一一写注释了

这里强调一下pathRewrite这个属性。比如我这个里面填的是’^/api’:’ '。假设你后端的api地址是http://localhost:3000/login,那么在使用反向代理之后你用发送ajax请求的url参数只需要填’api/login’就行了。换言之，这个属性就是让请求的url中api这三个字符替代了target属性后面的那个字符串。
我不知道我表达清楚没有，如果你有什么问题，欢迎与我讨论。我的QQ:948301454