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

参考

相关推荐
小鱼儿亮亮10 小时前
canvas中画线条,线条效果比预期宽1像素且模糊问题分析及解决方案
前端·react.js
小鱼儿亮亮11 小时前
使用Redux的combineReducers对数据拆分
前端·react.js
xiaominlaopodaren11 小时前
“UI里就可以请求数据库”,让你陌生的 React 特性
前端·javascript·react.js
weixin_4233919312 小时前
React 19 全面解析:颠覆性的新特性与实战指南
前端·javascript·react.js
weixin_4233919312 小时前
React Hooks 钩子
前端·javascript·react.js
CUGGZ12 小时前
第三代 React,怎么玩?
前端·javascript·react.js
代码小学僧13 小时前
🎉 在 Tailwind 中愉快的使用 Antd Design 色彩
前端·css·react.js
爱学习的茄子14 小时前
React Fiber:让大型应用告别卡顿的性能革命
前端·react.js·面试
柯南二号18 小时前
【大前端】React 使用 Redux 实现组件通信的 Demo 示例
前端·javascript·react.js
学习3人组18 小时前
React JSX 语法讲解
前端·react.js·前端框架