1.出现场景

在学习react配置代理的第一种方式，在package.json中追加proxy配置成功后，进行了多个代理配置的方式进行代理配置,结果页面访问不了

并且npm start途中，截图到一段错误

2.出现的原因

出现的原因应该是我的React版本高了(18.2.0),setupProxy.js的写法不一样了

3.解决方法

//旧版本写法
// const proxy = require('http-proxy-middleware')

// module.exports = function(app){
// 	app.use(
// 		proxy('/api1',{ //遇见/api1前缀的请求，就会触发该代理配置
// 			target:'http://localhost:5000', //请求转发给谁
// 			changeOrigin:true,//控制服务器收到的请求头中Host的值
// 			pathRewrite:{'^/api1':''} //重写请求路径(必须)
// 		}),
// 		proxy('/api2',{
// 			target:'http://localhost:5001',
// 			changeOrigin:true,
// 			pathRewrite:{'^/api2':''}
// 		}),
// 	)
// }

//react 18版本写法
const {createProxyMiddleware} = require('http-proxy-middleware')

module.exports = function (app) {
    app.use(
        //跨域1
        createProxyMiddleware('/api1', { // 当发起以 /api1 为前缀的请求时，触发该代理
            target: 'http://localhost:5000', /* 要转发的地址 */
            //为true时，Host为 服务端ip和端口，false为请求方ip和端口
            //服务器接收的 Host 字段的值。(是否欺骗服务器请求来源。默认false)
            changeOrigin: true, 
            // 将 /api1 前缀置为空
            pathRewrite: {'^/api1': ''}
        }),
		  createProxyMiddleware('/api2', { // 当发起以 /api1 为前缀的请求时，触发该代理
			target: 'http://localhost:5001', /* 要转发的地址 */
			//为true时，Host为 服务端ip和端口，false为请求方ip和端口
			//服务器接收的 Host 字段的值。(是否欺骗服务器请求来源。默认false)
			changeOrigin: true, 
			// 将 /api1 前缀置为空
			pathRewrite: {'^/api2': ''}
	  }),
        //跨域2
       )
}

记录下