React
- 安装http-proxy-middleware
安装 并 使用createProxyMIddleware 中间件
npm install http-proxy-middleware
npm i proxy
如果要更新proxy需要重新安装一下
- 在src下建立setupProxy.js文件
具体代码的含义
下面的代码都是配置在setProxy.js中的
直接引入proxy进行代理
//react 脚手架内置的库
const proxy =require('http-proxy-middleware')
module.exports = function(app){
app.use(
proxy('/api1',{//预见/api1前缀的就会触发该代理配置
target:"http://localhost:5001",//请求转发给谁
changeOrigin:true,//控制服务器收到的请求头中host字段的值 来自 5001端口了
pathRewrite:{'^/api1':""} //重写请求路径 只要带有/api1开头的路径才会走这个代理
}),
proxy('/api2',{
target:"http://localhost:5002",
changeOrigin:true,
pathRewrite:{'^/api2':""}
})
)
}
const proxy = require("http-proxy-middleware");
module.exports = function(app) {
app.use(
proxy("/api", {
target: <代理地址>,
changeOrigin: true, // needed for virtual hosted sites
ws: true, // proxy websockets
pathRewrite: {
"^/api": ""
}
})
);
};
下面的方法是引入中间件
const {createProxyMiddleware}=require('http-proxy-middleware');
module.exports=function(app){
app.use(
createProxyMiddleware('/api1',{
target:'https://api.github.com',
changeOrigin:true,
pathRewrite:{'^/api1':''}
})
)
}
说明:
- 优点:可以配置多个代理,可以灵活的控制请求是否走代理。
- 缺点:配置繁琐,前端请求资源时必须加前缀。
注意:
- 只有路径中命中/api1或者/api2的时候才会走代理
- 可以配置多个代理
- 请求服务器资源需要加前缀来表述
app.use可以传入多个proxy对象
proxy第一个参数是路径标识,第二个参数是个对象
修改完之后,重启react项目。