react项目中:设置代理setupProxy.js文件以后，项目文件在浏览器显示不开

原版文件

const proxy = require('http-proxy-middleware')

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

浏览器报错

报错处理

1. 原因： react版本更新之后，代理的编写方式需要改变；需要解构出； createProxyMiddleware
2. 参考代码：

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

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

PS

在使用http-proxy-middleware之前首先要在控制台安装

npm i http-proxy-middleware