React create-react-app 里配置代理(解决跨域)

news2025/7/11 18:54:18

配置代理:

creact-react-app v5
当然不是v5 下面的方法也适用。

方式一:package.json里配置

其实 cra里给了个简单的配置代理 就是在package.json里加上proxy就行了。
修改时需要 npm start重新运行一下,要不然可能不生效。
proxy只能以 http:// 或https://开头 否则会报:
When “proxy” is specified in package.json it must start with either http:// or https://:

示例:
比如后端给的完整地址如下:
http://10.16.xx.xxx:8080/fund_diag/fund_home/select_by_fund
这一段是相同的地址(也就是所有接口都是这个前缀),根据你的接口来定。

"proxy": "http://10.16.xx.xx:8080/fund_diag"

然后使用即可 比如 axios url直接请求就行代码如下:
request就是axios 只是我又封装了一层。

   // axios.get(url, { params })
    request.get("/fund_home/select_by_fund?fund=1001").then(res=>{
      console.log(res);
    })

然后启动项目就可以看到请求成功了(不配置proxy是成功不了的,因为跨域了)。
network截图:
network截图

方式二:http-proxy-middleware 配置代理

1.安装 http-proxy-middleware

npm install --save http-proxy-middleware

2.在src下新建 setupProxy.js 文件名必须是这个 然后配置一下即可。

const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
    app.use(
      '/api',
      createProxyMiddleware({
        target: 'http://10.16.xx.xxx:8080/fund_diag', //代理的地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''  // 将请求路径中的 "/api" 替换为 ""
        }
      })
    )
  };

axios使用/api/xx 即可走代理:

    // axios.get(url, { params })
    request.get("/api/fund_home/select_by_fund?fund=1001").then(res=>{
      console.log(res);
    })

示例:
比如后端给的完整地址如下:
http://10.16.xx.xxx:8080/fund_diag/fund_home/select_by_fund
http://10.16.xx.xxx:8080/fund_diag这段是接口的前缀,也就是每个接口都有这段。所以 我target 配置为 :http://10.16.xx.xxx:8080/fund_diag
当然 具体需需要怎么配置,根据你的接口来定

network截图:
network截图

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

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

相关文章

vueday02——使用naive-ui做一个ACM看榜

效果展示&#xff1a; 组件导入 <n-data-table:data"data":columns"column":bordered"true":single-line"false"/> 行数据导入数据结构 {key: 1,index: 2,name: user Name2,passNum:0,// age: 42,college: JiShou University…

Java RSA密钥从RSAPrivateKey和RSAPublicKey对象中,分别提取模和指数

概述&#xff1a; 在Java编程中&#xff0c;我们经常用到如下一段代码来生成RSA公私钥&#xff0c;分别拿到公私钥然后加解密计算&#xff1a; KeyPairGenerator keyPairGen; keyPairGen KeyPairGenerator.getInstance("RSA"); keyPairGen.initialize(2048, new S…

竞赛选题 深度学习YOLO抽烟行为检测 - python opencv

文章目录 1 前言1 课题背景2 实现效果3 Yolov5算法3.1 简介3.2 相关技术 4 数据集处理及实验5 部分核心代码6 最后 1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 基于深度学习YOLO抽烟行为检测 该项目较为新颖&#xff0c;适合作为竞赛课…

C-Net:用于乳腺超声图像分割的具有全局指导和细化残差的级联卷积神经网络

C-Net 期刊分析摘要贡献方法整体框架1. Bidirectional attention guidance network (BAGNet)2. Refinement residual network (RFNet) 实验1. 对比实验2. 消融实验 可借鉴参考 期刊分析 期刊名&#xff1a; Computer Methods and Programs in Biomedicine 期刊信息&#xff1a…

圣树唤歌最强阵容2023,圣树唤歌阵容推荐

无疑圣树唤歌作为一款备受欢迎的手机游戏&#xff0c;其深刻的战斗系统一直以来都受到大家的追捧。在这个虚拟世界中胜利的关键在于组建一支无懈可击的强大队伍&#xff0c;要想成为强者&#xff0c;就必须拥有最强阵容。 关注【娱乐天梯】&#xff0c;获取内部福利号 在本篇攻…

【C++11新特性】右值引用和移动语义(移动构造,移动赋值)

文章目录 前言一、列表初始化&#xff08;不同于初始化列表&#xff09;二、initializer_list三、decltype关键字四、nullptr五、右值引用移动拷贝和移动赋值被编译器识别成将亡值的原因 左值引用和右值引用的场景和价值右值引用的场景move函数 六、关于右值引用的功能和属性问…

【HTML+CSS】零碎知识点

公告滚动条 <!DOCTYPE html> <html><head><title>动态粘性导航栏</title><style>.container {background: #00aeec;overflow: hidden;padding: 20px 0;}.title {float: left;font-size: 20px;font-weight: normal;margin: 0;margin-left:…

23款奔驰C260L升级小柏林音响 15个喇叭 是多了哪两个

22款奔驰C级在音响系统方面也做出了改变&#xff0c;20款奔驰C级的小柏林音响是13喇叭590瓦功率&#xff0c;小柏林音响是多了哪两个喇叭呢&#xff1f;也就是眼镜盒上的两个&#xff0c;在之前的C级车型上&#xff0c;小柏林是没有这两个扬声器的。无论是小柏林还是大柏林&…

凉鞋的 Godot 笔记 201. 第三轮循环:引入变量

201. 第三轮循环&#xff1a;引入变量 在这一篇&#xff0c;我们进行第三轮 编辑-测试 循环。 在之前我们编写了 输出 Hello Godot 的脚本&#xff0c;如下: extends Node# Called when the node enters the scene tree for the first time. func _ready():print("Hell…

MySQL——六、库表操作(下篇)

MySQL 一、INSERT语句二、REPLACE语句三、UPDATE语句四、delete和TRUNCATE语句五、MySQL用户授权1、密码策略2、用户授权和撤销授权 一、INSERT语句 #在表里面插入数据&#xff1a;默认情况下&#xff0c;一次插入操作只插入一行 方式1&#xff1a; INSERT [INTO] 表名 [(colu…

word如何设置页码?教你快速提升文档颜值!

在创建文档时&#xff0c;为了更好地组织内容&#xff0c;页码是一个必不可少的元素。但是很多人不知道word如何设置页码&#xff0c;其实word提供了多种设置页码的方法&#xff0c;以满足不同文档的需求。本文将详细介绍3种设置页码的方法&#xff0c;无论您是初学者还是有经验…

【数据结构】排序--快速排序

目录 一 概念 二 快速排序的实现 1. hoare版本 (1)代码实现 (2)单趟排序图解 (3) 递归实现图解 (4)细节控制 (5)时间复杂度 (6)三数取中优化 2 挖坑法 (1)代码实现 (2)单趟图解 3 前后指针法 (1) 代码实现 (2) 单趟图解 ​编辑4 优化子区间 5 非递归快速排…

零基础Linux_18(进程间通信)共享内存+消息队列+信号量

目录 1. 共享内存 1.1 共享内存概念 1.2 系统函数shmget 1.2.1 key值和ftok 1.2.2 sizeshmflg返回值 1.3 系统调用shmctl 1.4 系统调用shmat和shmdt 1.5 共享内存进程间通信前期代码 1.6 共享内存进程间通信 2. 消息队列(了解) 3. 信号量(了解) 4. 笔试选择题 答案…

git的介绍和安装、常用命令、忽略文件、分支

git介绍和安装 首页功能写完了 ⇢ \dashrightarrow ⇢ 正常应该提交到版本仓库 ⇢ \dashrightarrow ⇢ 大家都能看到这个 ⇢ \dashrightarrow ⇢ 运维应该把现在这个项目部署到测试环境中 ⇢ \dashrightarrow ⇢ 测试开始测试 ⇢ \dashrightarrow ⇢ 客户可以看到目前做的…

137. 只出现一次的数字 II (中等。位运算)

不会做&#xff0c;思路来自官解 对于每一位来说&#xff0c;每个数字只能是 0 或 1&#xff0c;如果所有数字的第 i 位和能被3整除&#xff0c;那么表示只出现一次的这个元素在这一位上为0&#xff0c;反之就是1 class Solution:def singleNumber(self, nums: List[int]) -&g…

java.math.BigDecimal cannot be cast to java.lang.String

1.数据库&#xff1a; oracle 数据类型&#xff1a; NUMBER 2.java代码示例 List<Map<String, String>> list new ArrayList<>(); 错误&#xff1a; String nchangestdrate list.get(i).get(“rate”); 或者 BigDecimal nchangestdrate (BigDecimal)li…

【扩散模型从原理到实战】Chapter2 Hugging Face简介

文章目录 Hugging Face的核心功能介绍Hugging Face开源库Hugging Face开源库Gradio工具介绍参考资料 Hugging Face是机器学习从业者协作和交流的平台&#xff0c;成立于2016年&#xff0c;在纽约和巴黎设有办事处&#xff0c;团队成员来自世界各地&#xff0c;远程办公。 致力于…

程序员凭本事赚钱被没收所得,是否体现了“重刑主义”?

近日&#xff0c;承德程序员翻墙“打工”被罚款一事冲上热搜&#xff0c;热度不减。 1.人们同情该程序员的不幸遭遇&#xff0c;为他鸣不平&#xff1b; 2.包括程序员群体在内的大众关心此事背后的谋生问题&#xff1b; 3.引发了大众对承德执法的反思与质疑&#xff1b; 4.甚至…

【QT开发(8)】QT 中使用tensorrt

在之前的文章《【TensorRT&#xff08;2&#xff09;】研究美团tech的yolov6的TensorRT部署》说明了tensorRT 的使用流程。今天尝试将其并入QT 项目中。 文章目录 项目地址参考资料&#xff1a;该分支主要做的工作Task 1:读取视频文件&#xff0c;然后通过 dds 发送的事情Task…