react配置proxy代理的两种方式

react配置代理的两种方式

1.在package.json中配置

"proxy":"http://localhost:5001"

注意：

• proxy的value值只能是字符串的形式
• axios访问的时候不需要加前缀
• 不能配置多个代理
• 只有访问资源不在当前端口时才会访问代理端口的资源

修改完之后，重启react项目。

2.新建setupProxy.js文件

首先在src文件夹下新建文件

src/setupProxy.js

2.在setupProxy.js中引入内置库

//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':""}
        })
    )
}

注意：

• 只有路径中命中/api1或者/api2的时候才会走代理
• 可以配置多个代理
• 请求服务器资源需要加前缀来表述
  app.use可以传入多个proxy对象
  proxy第一个参数是路径标识，第二个参数是个对象
  修改完之后，重启react项目。