配置多个后端 API 代理

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

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

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

javascript 复制代码
// 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 请求。以下是一个示例组件的代码:

javascript 复制代码
// 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 请求。通过这种方式,我们可以在开发环境中轻松地解决跨域请求的问题,保证前后端的正常通信。

参考

相关推荐
PairsNightRain1 小时前
React Concurrent Mode 是什么?怎么使用?
前端·react.js·前端框架
小岛前端1 小时前
React 剧变!
前端·react.js·前端框架
用户47949283569154 小时前
面试官:讲讲这段react代码的输出(踩坑)
前端·javascript·react.js
GISer_Jing5 小时前
React中Element、Fiber、createElement和Component关系
前端·react.js·前端框架
lvchaoq16 小时前
react 修复403页面无法在首页跳转问题
前端·javascript·react.js
郝开17 小时前
6. React useState基础使用:useState修改状态的规则;useState修改对象状态的规则
前端·javascript·react.js
Codigger官方17 小时前
Linux 基金会牵头成立 React 基金会:前端开源生态迎来里程碑式变革
linux·前端·react.js
ObjectX前端实验室18 小时前
【图形编辑器架构】🧠 Figma 风格智能选择工具实现原理【猜测】
前端·react.js
技术钱18 小时前
react+andDesign+vite+ts从零搭建后台管理系统(三)-Layout布局
javascript·react.js·ecmascript
郝开18 小时前
7. React组件基础样式控制:行内样式,class类名控制
react.js