当前位置: 首页 > 后端技术 > Node.js

React脚手架配置proxy

时间:2023-04-03 20:28:47 Node.js

方法一在package.json中添加如下配置"proxy":"http://localhost:5000"说明:优点:配置简单,前端请求资源时可以不加前缀。缺点:无法配置多个代理。工作方法:按照上述方式配置代理。当请求3000不存在的资源时,请求会被转发到5000(优先匹配前端资源)。方法二1.第一步:创建代理配置文件在src下创建一个配置文件:src/setupProxy.js2。编写setupProxy.js配置具体代理规则:constproxy=require('http-proxy-middleware')module.exports=function(app){app.use(proxy('/api1',{//api1为请求需要转发的(所有/api1前缀的请求都会转发到5000)target:'http://localhost:5000',//配置转发目标地址(可以返回数据的服务器地址)changeOrigin:true,//控制服务器收到的请求头中host字段的值/*当changeOrigin设置为true时,服务器收到的请求头中的host为:localhost:5000当changeOrigin设置为false时,在服务器接收到的请求头主机为:localhost:3000changeOrigin默认值为false,但我们一般将changeOrigin值设置为true*/pathRewrite:{'^/api1':''}//去掉请求前缀保证后端服务器正常请求地址(必须配置)}),proxy('/api2',{target:'http://localhost:5001',changeOrigin:true,pathRewrite:{'^/api2':''}}))}描述:优点:可以配置多个代理,可以灵活控制请求是否走代理。缺点:配置繁琐,前端在请求资源时必须加前缀。