初识React之proxy代理

---

react脚手架配置代理总结

方法一

• 在package.json中追加如下配置

  "proxy": "http://localhost: 5000"

• 说明:

  1. 优点：配置简单，前端请求资源时可以不加任何前缀
  2. 缺点：不能配置多个代理
  3. 工作方式：上述方式配置代理，当请求了3000不存在的资源时，那么该清求会转发给5000（优先匹配前端资源）

方法二

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

   在src下创建配置文件：src/setupProxy.is //起名随意

2. 编写setupProxy.js配置具体代理规则:

   const proxy = require ('http-proxy-middleware')
   module. exports = function (app) {
     app.use(
       proxy('/api', { //api是需要转发的请求(所有带有/api前缀的请求都会转发给5000）
         target: 'http://localhost:5000',// 配贸转发目标地址(能返回数据的服务器地址)
         changeorigin: true,//控制服务器接收到的请求头中host字段的值
         /*
         changeoriginQ圈为truee，服务器收到的请求头中的host为：1ocalhost：5000
         changeorigin设圈为false时，服务器收到的请求头中的host为：1ocalhost：3000
         changeorigin默认值为false，但我们一般将changeorigin值设为true
         */
         pathRewrite: {'^api': ''}//去除请求前缀，保证交给后台服务器的是正常请求地址（必须配置）
       }),
       proxy('/api2', {
         target: 'http://localhost:5001'.
         changeOrigin: true,
         pathRewrite: {'^/api2': ''}
       })
     )}

• 说明:
  1. 优点: 可以配置多个代理, 灵活控制请求是否走代理
  2. 缺点: 配置繁琐, 前端请求时要加前缀