react脚手架配置代理总结

react脚手架配置代理总结

方法一：

在package.json中追加配置：

"proxy":"http://localhost:5000",   自己项目的服务器地址

说明：

1. 优点：配置简单；
2. 缺点：前端请求资源时不可以加任何前缀；不能配置多个代理，（比如有 两台以上的服务器）
3. 工作方式：当请求了前端项目地址不存在的资源时（比如前端项目运行在3000），会转发给5000，优先匹配前端资源。

方法二：

1. 第一步：创建代理配置文件

   //在src下创建配置文件：src/setupProxy.js
   

2. 第二步：编写setupProxy.js配置

   const proxy = require('http-proxy-middleware')
   module.exports = function(app){
   	app.use(
   		proxy('/api1',{ //所有带/api1前缀的请求都转发给5000
   			target:'http://localhost:5000',//转发的目标地址
   			changeOrigin:true,//控制服务器请求头中的host字段
               pathReWrite:{'^api1':''},//去除请求前缀/api1,、/api1只是前端自定义的标识，后端地址中不需要
   		}),
           proxy('/api2',{
   			target:'http://localhost:5001',//所有带/api1前缀的请求都转发给5001
   			changeOrigin:true,
               pathReWrite:{'^api11':''}
   		}),
   	)
   }