Vue 和 React 跨域设置多个代理

前言：

        因为公司数据不能暴露，本文中的数据都是临时创建出来的，可能有问题，不要全看。

        欢迎大家点赞评论，如果内容有说的错误的或者有其他解决方法，恳请大家多多指点。

Vue 设置多个代理

        在脚手架中，创建 vue.config.js 文件，并配置：

module.exports = {
	devServer: {
	    port: 9000,  //配置浏览器打开的端口号
	    proxy: {
	      '/api': { //判断请求路径前缀是什么
	      target: 'http://localhost:3000', //请求的服务器地址
	      ws: true,     //proxy websockets
	      changeOrigin: true, //是否允许跨域
	      pathRewrite: {  //修改这个请求路径的地方
	        '^/api': ''  
	      }
	    }

            //第二个端口
        '/xxxxx': { //判断请求路径前缀是什么
	      target: 'yyyyyyyyy', //请求的服务器地址
	      ws: true,     //proxy websockets
	      changeOrigin: true, //是否允许跨域
	      pathRewrite: {  //修改这个请求路径的地方
	        '^/xxxxx': ''  
	      }
	    }
               //.....
	},
     disableHostCheck: true,  // 这是由于新版的webpack-dev-server出于安全考虑，默认检查hostname，如果hostname 不是配置内的，将中断访问,请求是已经到达服务器的
  },
}

详情可以在 DevServer | webpack 中查找

React 设置多个代理

单纯配置请求的代理

        注意，下面是区分18前和18后的不同代理

        在脚手架中的 src 文件夹中，创建 setupProxy.js 文件，并配置：

//注意引入的这个中间件不要写花括号
const createProxyMiddleware = require("http-proxy-middleware");


// 配置多个代理 这个是18之前的配置
module.exports = function (app) { //app实际上是express的服务器对象。

  // app.use使用中间件
  app.use(
    "/api",
    createProxyMiddleware({
      target: "http://localhost:3000", //服务器地址
      changeOrigin: true,  //是否允许跨域
      pathRewrite: {   //修改请求路径的地方
        '^/api': '' 
      },
    })
  );


       //第二个
  app.use(
    "/xxx",
    createProxyMiddleware({
      target: "http://yyyyyyy",
      changeOrigin: true,
    })
  ); 
    //.......
};

// 配置多个代理 这个是18时的配置
module.exports = function (app) { //app实际上是express的服务器对象。

  // app.use使用中间件
  app.use(
    createProxyMiddleware("/api", {
      target: "http://localhost:3000", //服务器地址
      changeOrigin: true,  //是否允许跨域
      pathRewrite: {   //修改请求路径的地方
        '^/api': '' 
      },
    }),

     // 第二个
     createProxyMiddleware("/xxx", {
       target: "http://yyyyyyy",
       changeOrigin: true,
     }),

     //.......
  );
     
};

详情可以在 npm 中搜索 http-proxy-middleware 中间件