React配置多个代理

import React, { Component } from 'react'
import axios from "axios"
export default class App extends Component {
	getStudentData = () => {
		axios.get("http://localhost:3000/api1/students").then(
			response => {console.log("成功了", response.data);},
			error => {console.log("失败了", error);}
		)
	}
	getCarData = () => {
		axios.get("http://localhost:3000/api2/cars").then(
			response => {console.log("成功了", response.data);},
			error => {console.log("失败了", error);}
		)
	}
  render() {
	return (
	  <div>
		<button onClick={this.getStudentData}>点我获取学生数据</button>
		<button onClick={this.getCarData}>点我获取学生数据</button>
	  </div>
	)
  }
}

// 入口文件
//引入react核心库
import React from 'react';
//引入ReactDOM
import ReactDOM from 'react-dom/client'
//引入App组件
import App from "./App"
// import ReactDOM from 'react-dom/client'
const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<App/>)

const express = require('express')
const app = express()
app.use((request, response, next) => {
    console.log("有人请求服务器1");
    next();
})
app.get('/students', (request, response) => {
    const students = [
        {id:"001", name:"tom", age:18},
        {id:"002", name:"jerry", age:18},
        {id:"003", name:"tony", age:8},
    ]
    response.send(students)
})

app.listen(5000, (err) => {
    if(!err)console.log("服务器1启动成功,地址为http://localhost:5000/students")
})

const express = require('express')
const app = express()
app.use((request, response, next) => {
    console.log("有人请求服务器2");
    next();
})
app.get('/cars', (request, response) => {
    const cars = [
        {id:"001", name:"宝马", price:18},
        {id:"002", name:"奔驰", price:18},
        {id:"003", name:"保时捷", price:8},
    ]
    response.send(cars)
})

app.listen(5001, (err) => {
    if(!err)console.log("服务器2启动成功,地址为http://localhost:5001/cars")
})

const { createProxyMiddleware } = require('http-proxy-middleware')
module.exports = function (app) {
 app.use(
  createProxyMiddleware('/api1', {
   //api1是需要转发的请求(所有带有/api1前缀的请求都会转发给5000)
   target: 'http://localhost:5000', //配置转发目标地址(能返回数据的服务器地址)
   changeOrigin: true, //控制服务器接收到的请求头中host字段的值
   pathRewrite: { '^/api1': '' }, //去除请求前缀，保证交给后台服务器的是正常请求地址(必须配置)

  }),
  createProxyMiddleware('/api2', {
   target: 'http://localhost:5001',
   changeOrigin: true,
   pathRewrite: { '^/api2': '' },
  })
 )
}

node server1.js

node server2.js

npm start