配置多个后端 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.jsimportReact,{Component}from'react';importaxiosfrom'axios';exportdefaultclassProxy2extendsComponent{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 代理
• 完整代码