配置多个后端 API 代理

在开发 React 应用时，通常会涉及到与后端 API 的交互。而在开发过程中，我们经常需要在开发环境中使用代理来解决跨域请求的问题。Create React App 提供了一种简单的方式来配置代理，即通过创建一个名为 setupProxy.js 的文件来配置代理规则。

假设我们的应用需要访问两个不同的后端 API，分别是 /api1 和 /api2。我们可以在 setupProxy.js 文件中配置多个代理规则，使得不同的 API 请求会被代理到不同的后端服务上。

以下是一个示例 setupProxy.js 文件的配置：

// setupProxy.js

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

module.exports = function(app) {
  app.use(
    '/api1',
    createProxyMiddleware({
      target: 'https://dev.usemock.com',
      changeOrigin: true,
      pathRewrite: {
        '^/api1': ''
      }
    })
  );

  app.use(
    '/api2',
    createProxyMiddleware({
      target: 'https://dev.usemock.com',
      changeOrigin: true,
      pathRewrite: {
        '^/api2': ''
      }
    })
  );
};

在这个配置中，我们使用了 http-proxy-middleware 库来创建代理中间件。对于 /api1 和 /api2 开头的请求，它们会被代理到 https://dev.usemock.com，并且通过 pathRewrite 将路径重写为空字符串，以保证请求正确到达后端服务。

接下来，我们可以在 React 组件中使用这些代理进行 API 请求。以下是一个示例组件的代码：

// Proxy2.js

import React, { Component } from 'react';
import axios from 'axios';

export default class Proxy2 extends Component {
  handleFetch1 = () => {
    axios.get('/api1/65d55e87c87ce4342e1285ab/todos')
      .then(response => console.log('请求成功', response.data))
      .catch(error => console.error(error));
  };

  handleFetch2 = () => {
    axios.get('/api2/65d55e87c87ce4342e1285ab/todos')
      .then(response => console.log('请求成功', response.data))
      .catch(error => console.error(error));
  };

  render() {
    return (
      <div>
        <button onClick={this.handleFetch1}>点击我通过代理/api1发送请求</button>
        <hr />
        <button onClick={this.handleFetch2}>点击我通过代理/api2发送请求</button>
      </div>
    );
  }
}

在这个示例中，我们通过点击按钮触发两个不同的 API 请求，分别使用了 /api1 和 /api2 前缀来访问代理配置中的两个后端 API。

通过以上配置，我们可以在开发 React 应用时轻松地使用 setupProxy.js 文件配置多个后端 API 的代理规则，确保与后端服务的顺畅通信。

这篇博客介绍了如何使用 setupProxy.js 文件配置多个后端 API 的代理规则，并在 React 组件中使用这些代理进行 API 请求。通过这种方式，我们可以在开发环境中轻松地解决跨域请求的问题，保证前后端的正常通信。

参考

• 配置多个后端 API 代理
• 完整代码