配置多个后端 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>);}
}

在这个示例中,我们通过点击按钮触发两个不同的 API 请求,分别使用了 /api1/api2 前缀来访问代理配置中的两个后端 API。

通过以上配置,我们可以在开发 React 应用时轻松地使用 setupProxy.js 文件配置多个后端 API 的代理规则,确保与后端服务的顺畅通信。
在这里插入图片描述

这篇博客介绍了如何使用 setupProxy.js 文件配置多个后端 API 的代理规则,并在 React 组件中使用这些代理进行 API 请求。通过这种方式,我们可以在开发环境中轻松地解决跨域请求的问题,保证前后端的正常通信。

参考

  • 配置多个后端 API 代理
  • 完整代码

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/704741.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《数据治理简易速速上手小册》第4章 数据安全与合规性(2024 最新版)

文章目录 4.1 数据安全的基本原则4.1.1 基础知识4.1.2 重点案例&#xff1a;在线零售商的数据加密4.1.3 拓展案例 1&#xff1a;医疗机构的访问控制4.1.4 拓展案例 2&#xff1a;金融服务提供商的数据备份和恢复 4.2 遵循数据合规性的策略4.2.1 基础知识4.2.2 重点案例&#xf…

PHPStudy无法解析php(7.3.4)文件

#告诉服务器&#xff0c;对于以.fcgi、.php或.phtml为后缀的请求&#xff0c;应该使用FPM进行处理。 AddHandler fcgid-script .fcgi .php .phtml #设置了全局默认使用的PHP版本路径 FcgidInitialEnv PHPRC "D:/phpstudy_pro/Extensions/php/php7.3.4nts" #告诉服务器…

Java制作比对数据的工具

要制作一个Java工具来比对数据&#xff0c;你需要考虑几个关键点&#xff1a;数据的来源、数据的格式、比对算法和结果输出。以下是一个简单的步骤&#xff0c;帮助你开始制作这样的工具&#xff1a; 确定数据来源&#xff1a; 数据可能来自文件、数据库、API或其他来源。根据数…

Django学习笔记-ModelForm使用(完全依赖)

1.创建模型 ,code,name,sex,entrydate 2.模型映射 python manage.py makemigrations myapp01,python manage.py migrate 3.创建模型表单,继承forms.ModelForm,Meta:元数据,models需引入,fields填写引用的模型变量 4.创建testModelForm.html,添加urls 5.views编写testmodelfo…

simple-pytest 框架使用指南

simple-pytest 框架使用指南 一、框架介绍简介框架理念&#xff1a;框架地址 二、实现功能三、目录结构四、依赖库五、启动方式六、使用教程1、快速开始1.1、创建用例&#xff1a;1.2、生成py文件1.3、运行脚本1.3.1 单个脚本运行1.3.2 全部运行 1.4 报告查看 2、功能介绍2.1、…

小程序开发之配置服务器域名

在小程序开发中&#xff0c;配置服务器域名是为了允许小程序能够从指定的后端服务器获取数据或进行通信。这通常涉及以下步骤&#xff1a; 1. **登录微信公众平台**&#xff1a;首先&#xff0c;需要登录微信公众平台&#xff0c;并找到你的小程序管理页面。 2. **进入开发设…

C语言之滑动窗口问题

一、题目&#xff1a; 请从字符串中找出一个最长的不包含重复字符的子字符串&#xff0c;计算该最长子字符串的长度。 假设字符串中只包含从 a 到 z 的字符。 数据范围 输入字符串长度 [0,1000][0,1000]。 样例 输入&#xff1a;"abcabc"输出&#xff1a;3 二…

flutter保存图片到相册封装工具类

/// 使用 File api import dart:io;/// 使用 Uint8List 数据类型 import dart:typed_data;/// 图片缓存管理 import package:cached_network_image/cached_network_image.dart; import package:flutter/services.dart;/// 使用 DefaultCacheManager 类&#xff08;可能无法自动…

设计模式(八)外观模式

相关文章设计模式系列 1.外观模式简介 外观模式介绍 当我们开发Android的时候&#xff0c;无论是做SDK还是封装API&#xff0c;我们大多都会用到外观模式&#xff0c;它通过一个外观类使得整个系统的结构只有一个统一的高层接口&#xff0c;这样能降低用户的使用成本。 外观…

2279. 网络战争(最小割,01分数规划,二分)

活动 - AcWing 给出一个带权无向图 G(V,E)&#xff0c;每条边 e 有一个权 we。 求将点 s 和点 t 分开的一个边割集 C&#xff0c;使得该割集的平均边权最小&#xff0c;即最小化&#xff1a; ∑(e∈C)we/|C| 注意&#xff1a; 边割集的定义与最小割中的割边的集合不同。在本…

面试redis篇-10Redis集群方案-主从复制

在Redis中提供的集群方案总共有三种: 主从复制哨兵模式分片集群主从复制 单节点Redis的并发能力是有上限的,要进一步提高Redis的并发能力,就需要搭建主从集群,实现读写分离。 主从数据同步原理 Replication Id:简称replid,是数据集的标记,id一致则说明是同一数据集。每…

在linux下配置网桥透明模式防火墙

在 Linux 下配置网桥透明模式防火墙&#xff0c;您可以使用 iptables 或者 nftables 来实现。下面是一个基本的示例&#xff0c;假设您已经有一个网桥 br0&#xff0c;并且想要在网桥上应用透明防火墙规则。 安装必要的工具&#xff1a; sudo apt update sudo apt install brid…

mybatis架构

分为三层&#xff1a;接口层、数据处理层、框架支撑层 那么展开解释每层职责 1.接口层&#xff1a;包含新增、删除、查询、修改接口。其调用方式大致分为两种&#xff1a;一种是基于statementId&#xff0c;一种是基于Mapper接口。另外还维护配置信息的接口 2.数据处理层&am…

Java SpringBoot 创建项目工程输出 Hello World

Java SpringBoot 创建项目工程输出 Hello World 1、新建项目 2、创建 controller 3、编写 Hello World 代码 package com.zhong.demo01.controller;import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.Res…

本地项目如何上传到gitee

文章目录 一、在gitee上新建远程仓库二、初始化本地仓库三、执行git命令上传代码 一、在gitee上新建远程仓库 仓库名称必填&#xff0c;路径自动跟仓库名称保持一致 解释说明&#xff1a; 仓库名称&#xff1a;必填&#xff0c;每个仓库都需要有一个名称&#xff0c;同一个码…

Armbian 23.11(Ubuntu 22.04)安装glances不显示docker容器状态解决办法

引流关键词&#xff1a; debian 系统环境信息 注意&#xff01;这里只是交代&#xff01;具体情况无需与我一致&#xff01; 命令输出cat /proc/versionLinux version 6.6.2-edge-rockchip64 (armbiannext) (aarch64-linux-gnu-gcc (Ubuntu 11.4.0-1ubuntu1~22.04) 11.4.0, …

【Leetcode】150. 逆波兰表达式求值

今天做了一道leetcode&#xff0c;题目不算难&#xff0c;基本就是stack的入栈出栈&#xff0c;但我看了一圈别人的代码&#xff0c;感觉不够优雅&#xff0c;所以我想分享一下自己的写法&#xff0c;主要就是用Map和BiFunction优化4个if else Java中&#xff0c;函数是能以对…

kubectl 命令行管理K8S

目录 陈述式资源管理方式 介绍 命令 项目的生命周期 创建 kubectl create命令 发布 kubectl expose命令 更新 kubectl set 回滚 kubectl rollout 删除 kubectl delete 陈述式资源管理方式 介绍 1.kubernetes 集群管理集群资源的唯一入口是通过相应的方法…

2024年用AI自动直播有效果吗?

在如今全民直播的时代&#xff0c;做短视频和直播已经成为多数企业、实体店必备的技能之一&#xff0c;全国各个头部的品牌&#xff0c;都在纷纷加码直播&#xff0c;甚至已经开启直播矩阵的体系&#xff0c;另外中小型商家也在思考&#xff0c;如何通过抖音直播&#xff0c;让…

量子前沿:美国计算社区联盟CCC发布量子计算进展最新研报!

内容来源&#xff1a;量子前哨&#xff08;ID&#xff1a;Qforepost&#xff09; 编辑丨慕一 编译/排版丨沛贤 深度好文&#xff1a;1800字丨12分钟阅读 近日&#xff0c;美国计算社区联盟 (CCC) 发布了过去五年量子计算进展的最新报告。CCC还分享了美国东北大学库里计算机科…