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://192.168.43.106:8080',
                changeOrigin: true,
                ws:true,                                            //websocket
                pathRewrite:{
                    '^/api':''
                }
            }
        }
    }
}
//配置跟2.x差不多就不一一写注释了

来源：CSDN

作者：RockWu.js

链接：https://blog.csdn.net/qq_38738083/article/details/89922177