配置多个后端 API 代理

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

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

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

// setupProxy.jsconst { 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.jsimport 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>);}
}