React中配置代理服务器(两种方法)

React

• 安装http-proxy-middleware

安装  并  使用createProxyMIddleware 中间件

npm install http-proxy-middleware

npm i proxy

如果要更新proxy需要重新安装一下

• 在src下建立setupProxy.js文件

具体代码的含义

下面的代码都是配置在setProxy.js中的

直接引入proxy进行代理

//react 脚手架内置的库 
const proxy =require('http-proxy-middleware')

module.exports = function(app){
    app.use(
        proxy('/api1',{//预见/api1前缀的就会触发该代理配置
            target:"http://localhost:5001",//请求转发给谁
            changeOrigin:true,//控制服务器收到的请求头中host字段的值  来自 5001端口了
            pathRewrite:{'^/api1':""} //重写请求路径 只要带有/api1开头的路径才会走这个代理
        }),
        proxy('/api2',{
            target:"http://localhost:5002",
            changeOrigin:true,
            pathRewrite:{'^/api2':""}
        })
    )
}

const proxy = require("http-proxy-middleware");
module.exports = function(app) {
  app.use(
    proxy("/api", {
      target: <代理地址>,
      changeOrigin: true, // needed for virtual hosted sites
      ws: true, // proxy websockets
      pathRewrite: {
        "^/api": ""
      }
    })
  );
};

下面的方法是引入中间件 

const {createProxyMiddleware}=require('http-proxy-middleware');

module.exports=function(app){
    app.use(
        createProxyMiddleware('/api1',{
            target:'https://api.github.com',
            changeOrigin:true,
            pathRewrite:{'^/api1':''}
        })
    )
}

说明：

1. 优点：可以配置多个代理，可以灵活的控制请求是否走代理。
2. 缺点：配置繁琐，前端请求资源时必须加前缀。

注意：

• 只有路径中命中/api1或者/api2的时候才会走代理
• 可以配置多个代理
• 请求服务器资源需要加前缀来表述
  app.use可以传入多个proxy对象
  proxy第一个参数是路径标识，第二个参数是个对象
  修改完之后，重启react项目。

如有不足希望指出 大家一起共同进步！！！