在开发 React 应用时通常会涉及到与后端 API 的交互。而在开发过程中我们经常需要在开发环境中使用代理来解决跨域请求的问题。Create React App 提供了一种简单的方式来配置代理即通过创建一个名为setupProxy.js的文件来配置代理规则。假设我们的应用需要访问两个不同的后端 API分别是/api1和/api2。我们可以在setupProxy.js文件中配置多个代理规则使得不同的 API 请求会被代理到不同的后端服务上。以下是一个示例setupProxy.js文件的配置// setupProxy.jsconst{createProxyMiddleware}require(http-proxy-middleware);module.exportsfunction(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}fromreact;importaxiosfromaxios;exportdefaultclassProxy2extendsComponent{handleFetch1(){axios.get(/api1/65d55e87c87ce4342e1285ab/todos).then(responseconsole.log(请求成功,response.data)).catch(errorconsole.error(error));};handleFetch2(){axios.get(/api2/65d55e87c87ce4342e1285ab/todos).then(responseconsole.log(请求成功,response.data)).catch(errorconsole.error(error));};render(){return(divbutton onClick{this.handleFetch1}点击我通过代理/api1发送请求/buttonhr/button onClick{this.handleFetch2}点击我通过代理/api2发送请求/button/div);}}在这个示例中我们通过点击按钮触发两个不同的 API 请求分别使用了/api1和/api2前缀来访问代理配置中的两个后端 API。通过以上配置我们可以在开发 React 应用时轻松地使用setupProxy.js文件配置多个后端 API 的代理规则确保与后端服务的顺畅通信。这篇博客介绍了如何使用setupProxy.js文件配置多个后端 API 的代理规则并在 React 组件中使用这些代理进行 API 请求。通过这种方式我们可以在开发环境中轻松地解决跨域请求的问题保证前后端的正常通信。参考配置多个后端 API 代理完整代码 
长河君 · 2026/9/16 10:58:35 · 阅读 1.2k 配置多个后端 API 代理
在开发 React 应用时通常会涉及到与后端 API 的交互。而在开发过程中我们经常需要在开发环境中使用代理来解决跨域请求的问题。Create React App 提供了一种简单的方式来配置代理即通过创建一个名为setupProxy.js的文件来配置代理规则。假设我们的应用需要访问两个不同的后端 API分别是/api1和/api2。我们可以在setupProxy.js文件中配置多个代理规则使得不同的 API 请求会被代理到不同的后端服务上。以下是一个示例setupProxy.js文件的配置// setupProxy.jsconst{createProxyMiddleware}require(http-proxy-middleware);module.exportsfunction(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}fromreact;importaxiosfromaxios;exportdefaultclassProxy2extendsComponent{handleFetch1(){axios.get(/api1/65d55e87c87ce4342e1285ab/todos).then(responseconsole.log(请求成功,response.data)).catch(errorconsole.error(error));};handleFetch2(){axios.get(/api2/65d55e87c87ce4342e1285ab/todos).then(responseconsole.log(请求成功,response.data)).catch(errorconsole.error(error));};render(){return(divbutton onClick{this.handleFetch1}点击我通过代理/api1发送请求/buttonhr/button onClick{this.handleFetch2}点击我通过代理/api2发送请求/button/div);}}在这个示例中我们通过点击按钮触发两个不同的 API 请求分别使用了/api1和/api2前缀来访问代理配置中的两个后端 API。通过以上配置我们可以在开发 React 应用时轻松地使用setupProxy.js文件配置多个后端 API 的代理规则确保与后端服务的顺畅通信。这篇博客介绍了如何使用setupProxy.js文件配置多个后端 API 的代理规则并在 React 组件中使用这些代理进行 API 请求。通过这种方式我们可以在开发环境中轻松地解决跨域请求的问题保证前后端的正常通信。参考配置多个后端 API 代理完整代码