react配置代理

场景： 当遇到页面资源部署在3000端口，但服务器数据在5000端口的的时候会造成跨域。这个时候请求是能给成功发送到后端的，但是请求完的数据无法响应到客户端。react中有两种解决方式。

解决：

1.配置单个代理

在package.json文件中添加：

"proxy":"服务器的地址"
然后重启项目 npm start

2.配置多个代理

在src 文件夹下创建setupProxy.js文件（文件名固定不能更改，脚手架会自动识别文件）

setupProxy.js 文件
const proxy =require("http-proxy-middleware");
module.exports=(app)=>{
app.use(
proxy("/api1",{ //遇见/api1前缀的请求，就触发该代理配置
target:"http://localhost:5000",//所请求的服务器地址
changeOrigin:true,//控制服务器接收到的响应头中HOST字段的值
pathRewrite:{'^/api1':""}//重写请求路径
}),
proxy("/api2",{
target:"http://localhost:5002",//changeOrigin:true,
pathRewrite:{'^/api2':""}
})
)
}