反向代理使用背景：

vue项目，前端代码在浏览器里面运行，由于浏览器的同源策略，不能直接发送跨域请求，导致请求发生跨域问题，错误如下图。

在这里插入图片描述

跨域的解决方案：

  • jsonp(前端解决方案)
  • 反向代理(前端解决方案)
  • CORS(后端解决方案):cross orign resource sharing

什么是反向代理

反向代理(Reverse Proxy)，以代理服务器来接收 internet 上的连接请求，然后将请求转发给内部网络上的服务器，并将请从服务器上得到的结果返回给 internet 上请求的客户端，此时代理服务器对外表现为一个服务器。

反向代理配置

下面以 vue-cli3 为例，vue-cli版本不同，配置不方法不同，详情可点击这里。

项目根目录新建 vue.config.js 文件，并将如下代码放入文件中。

// 修改和配置后必须重启服务器后才能生效
module.exports = {
  lintOnSave: false,  // 配置关闭eslint  (代码会有红色热浪提示错 但不影响代码运行)
  publicPath: './',   // 打包路径，使用相对路径生成的dist文件夹下的index可以打开
  outputDir: 'dist',  // 输入文件目录
  productionSourceMap: true,	// 取消生成 map 文件
  devServer: {
    disableHostCheck: true, // 开启可以用自己的域名
    https: false,   // 是否使用https协议 
    hotOnly: false, // 是否开启热更新
    open: true,     // 开启跨域
    proxy: { 	   // 代理服务器，一个proxy下可以配置多个代理。
      '/myapi': {
        target: 'http://192.168.3.239:8082',	// 代理地址，http://192.168.3.30:8082
        changeOrigin: true,     // 是否开启代理 
        ws: false,		//是否要代理 websocket
        //pathRewrite对请求路径进行重定向以匹配到正确的请求地址
        // 假设页面路由配置 /site/login?token=&fnjdfjb&12addaj
        // 本地请求地址为 http://localhos:8080/site/login?token=&fnjdfjb&12addaj
        // 解析后的地址为 http://192.168.3.239:8082/login?token=&fnjdfjb&12addaj
        // 重写路径  需要设置重写的话，要在后面的调用接口前加上/api 来代替target
        pathRewrite: {
          '^/site': '',		//路由里的地址匹配 ： 替换后的地址
            // '^/upload': '/upload'    //（如果路由有公共部分 例如 /upload/xx/xx类型的，那代理就需要这么写或者直接不写pathRewrite这部分）
        }
      }
    }
  }
};

注意事项：配置或修改了proxy代理内容后一定要重启项目！！！，否则无效或者报错404.还有就是不要出现’/api’ 和’/api2’这样相似的，这样只会生效一个！！！