React - ajax 配置代理

news/2025/2/23 13:28:18
  1. React 本身只关注于界面,并不包含发送 ajax 请求的代码;
  2. 前端应用需要通过 ajax 请求与后台进行交互(json 数据);
  3. React 应用中需要集成第三方 ajax 库(或者自己封装)。

方法一

在 package.json 中追加如下配置:

"proxy":"http://localhost:5000" // 5000端口号

说明:

  1. 优点:配置简单,前端请求资源时可以不加任何前缀;
  2. 缺点:不能配置多个代理;
  3. 工作方式:上述方式配置代理,当请求了3000不存在的资源时,那么该请求会转发给5000(优先匹配前端资源,就近原则)。

方法二

第一步:创建代理配置文件

在src下创建配置文件:src/setupProxy.js

第二步:编写 setupProxy.js 配置具体代理规则

const proxy = require('http-proxy-middleware')

module.exports = function (app) {
    app.use(
        proxy('/api', { // 遇见 /api 前缀的请求,就会触发该代理配置
            // 请求转发给谁
            target: 'http://localhost:5000',
            changeOrigin: true, // 控制服务器收到的请求头中的Host的值
            pathRewrite:{'^/api':''} // 重写请求路径(必须) 将/api换成''
        }),
        proxy('/api1', {
            target: 'http://localhost:5001',
            changeOrigin: true,
            pathRewrite:{'^/api1':''}
        }),
    )
}

说明:

  1. 优点:可以配置多个代理,可以灵活的控制请求是否走代理。
  2. 缺点:配置繁琐,前端请求资源时必须加前缀。

http://www.niftyadmin.cn/n/5863435.html

相关文章

【JT/T 808协议】808 协议开发笔记 ② ( 终端注册 | 终端注册应答 | 字符编码转换网站 )

文章目录 一、消息头 数据1、消息头拼接2、消息 ID 字段3、消息体属性 字段4、终端手机号 字段5、终端流水号 字段 二、消息体 数据三、校验码计算四、最终计算结果五、终端注册应答1、分解终端应答数据2、终端应答 消息体 数据 六、字符编码转换网站 一、消息头 数据 1、消息头…

大模型安全问题详解(攻击技术、红队测试与安全漏洞)

文章目录 大模型攻击技术提示注入攻击(Prompt Injection)数据投毒攻击(Data Poisoning)模型克隆攻击(Model Cloning)拒绝服务攻击(DoS)和拒绝钱包攻击(DoW)插…

OpenHarmony构建系统-GN与子系统、部件、模块理论与实践

理论 OpenHarmony源码体系 OpenHarmony的源码架构基于模块化设计,为了方便系统的功能的增加和裁剪,设计了基于GN构建的模块系统。整个模块可从大到小划分为产品(product)、领域/子系统集(domain)、子系统(sub system)、部件(component)、模块/组件(modu…

TensorFlow 是一个由 Google 开发的开源机器学习库

TensorFlow 是一个由 Google 开发的开源机器学习库,被广泛应用于深度学习和人工智能领域。它的基本概念包括以下几点: 张量(Tensors):在 TensorFlow 中,数据的基本单位是张量,它类似于多维数组或…

JVM预热

阿里电商平台每年的各种大促活动,对于Java技术来说,其中重要一个操作环节就是预热操作。 目录 预热是什么?为什么要预热? java 程序不预热和预热的调用对比 预热是什么? 预热是指,在 JVM 启动后&#xff0…

(二)趣学设计模式 之 工厂方法模式!

目录 一、 啥是工厂方法模式?二、 为什么要用工厂方法模式?三、 工厂方法模式怎么实现?四、 工厂方法模式的应用场景五、 工厂方法模式的优点和缺点六、 总结 🌟我的其他文章也讲解的比较有趣😁,如果喜欢博…

Unity贴图与模型相关知识

一、贴图 1.贴图的类型与形状 贴图类型 贴图形状 2.在Unity中可使用一张普通贴图来生成对应的法线贴图(但并不规范) 复制一张该贴图将复制后的贴图类型改为Normal Map 3.贴图的sRGB与Alpha sRGB:勾选此选项代表此贴图存储于Gamma空间中…

蓝桥杯真题 - 缴纳过路费 - 题解

题目链接:https://www.lanqiao.cn/problems/19736/learning/ 个人评价:难度 2 星(满星:5) 前置知识:并查集 整体思路 按边权从小到大处理,将处理过的边的两个端点合入一个并查集中&#xff1b…