react配置代理方式

在src目录文件夹下面创建setupProxy.js文件

const proxy = require("http-proxy-middleware");

module.exports = function (app) {
  app.use(
    proxy("/api1", {
      target: "http://localhost:5000",
      changeOrigin: true,
      pathRewrite: { "^/api1": "" },
    })
  );
  app.use(
    proxy("/api2", {
      target: "http://localhost:5001",
      changeOrigin: true,
      pathRewrite: { "^/api2": "" },
    })
  );
};

配置后端；服务器需要访问的地址，

target: "http://localhost:5000"后端地址

 changeOrigin: true,是否将Host改为localhost：5000的请求头

pathRewrite: { "^/api1": "" },重写路径，将以api1开头的路径替换成空字符串

如果你有多个代理需要配置，就添加多个app.use()即可

class App extends Component {
  getStudentData = () => {
    axios.get("/api1/students").then(
      (response) => {
        console.log("成功了", response.data);
      },
      (error) => {
        console.log("失败了", error);
      }
    );
  };

render() {
    const { toDoList } = this.state;
    return (
      <div className="todo-container">
          <button onClick={this.getStudentData}>点击获取学生数据</button>
      </div>
    );
  }

}