React 脚手架配置代理的方法

方法一：直接在 package.json 中追加配置

例如，当前服务器端口为 3000，若要向端口 5000 的服务器发送请求，我们可以在 package.json 中添加如下配置：

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

此后，当请求了 3000 端口不存在的资源时，那么请求就会转发给 5000 端口。

示例：

例如一个 create-react-app 创建项目在 3001 端口运行，我们使用 json-server 模拟了一个 3000 端口的服务器，其中 JSON 数据如下：

{
    "students": [
        {"id": "0001", "name": "Tom", "age": 18},
        {"id": "0002", "name": "Jack", "age": 19},
        {"id": "0003", "name": "Frank", "age": 20}
    ]
}

students 数据的 URL 为 http://localhost:3000/students，若我们要向 3001 端口发送 GET 请求来获取 students 的 JSON 数据，则可以在 package.json 中添加配置：

"proxy": "http://localhost:3000"

• 获取 3001 端口有的资源：

  export default class App extends Component {
  
    getInfo = () => {
      axios.get("http://localhost:3001/index.html").then(
        response => {
          console.log(response.data);
        },
        err => {
          console.log(err);
        }
      );
    }
  
  
    render() {
      return (
        <div>
          <button onClick={this.getInfo}>点击发送请求获取数据</button>
        </div>
      )
    }
  }

  此时控制台输出当前项目下的 index.html 文件：

  

• 获取 3001 端口没有而 3000 端口有的资源：

  export default class App extends Component {
  
    getInfo = () => {
      axios.get("http://localhost:3001/students").then(
        response => {
          console.log(response.data);
        },
        err => {
          console.log(err);
        }
      );
    }
  
  
    render() {
      return (
        <div>
          <button onClick={this.getInfo}>点击发送请求获取数据</button>
        </div>
      )
    }
  }

  此时控制台输出 3000 端口下的 students 数据：

  

• 若获取的资源 3001 端口和 3000 端口都没有，则控制台会报错。

方法一优缺点：

• 优点：配置简单，前端请求资源时可以不加任何前缀
• 缺点：不能配置多个代理

方法二：创建 setupProxy.js 文件

1. 首先在 src 目录下创建 setupProxy.js 文件

2. 编写 setupProxy.js 配置具体代码规范：

   // 配置端口 8000 和端口 5001 的服务器代理
   // setupProxy.js
   
   const { createProxyMiddleware } = require('http-proxy-middleware');
   // 引入内置模块: HTTP 代理中间件
   
   module.exports = function(app) {
       // app 为服务对象
       app.use(
           createProxyMiddleware('/api1', {					// 遇见 /api1 前缀的请求，就会触发该代理
               target: 'http://localhost:8000',			// 请求转发的端口地址
               changeOrigin: true,										// 控制服务器收到响应头中 Host 字段的值
               pathRewrite: {
                   '^/api1': ''											// 去除请求前缀，保证交给后台服务器的是正常请求地址
               }
           })
       );
       
       app.use(
           createProxyMiddleware('/api2', {
               target: 'http://localhost:5001',
               changeOrigin: true,
               pathRewrite: {
                   '^/api2': ''
               }
           })
       );
   }

   http-proxy-middleware 1.x 版本后配置代理使用：

   const { createProxyMiddleware } = require('http-proxy-middleware');

   此前使用：

   const proxy = require('http-proxy-middleware');

3. 向不同端口发送请求的方法：

   • 如果要向 8000 端口发送请求，例如：

     axios.get('http://localhost:3000/api1/teachers').then(
       // ...
     );

   • 如果要向 5001 端口发送请求，同理：

     axios.get('http://localhost:3000/api2/students').then(
     	// ...
     );

方法二优缺点：

• 优点：可以配置多个代理，可以更加灵活地控制是否走代理请求
• 缺点：配置繁琐，前端发送代理请求时必须加前缀