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

配置代理:

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.rhkb.cn/news/160467.html

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

相关文章

Leetcode学习记录(1)

1.unordered_map C关联容器&#xff0c;内部hash表结构&#xff08;检索&#xff09; 通过key来检索value&#xff0c;不是通过绝对地址&#xff0c;内部无序&#xff0c;Map对应唯一值&#xff0c;动态管理 unordered_map<const Key, T> map; 如上述代码表述&#x…

主机jvisualvm连接到tomcat服务器查看jvm状态

​使用JMX方式连接到tomcat&#xff0c;连接后能够查看前边的部分内容&#xff0c;但是不能查看Visual GC&#xff0c;显示不受此JVM支持&#xff0c; 对了&#xff0c;要显示Visual GC&#xff0c;首先要安装visualvm工具&#xff0c;具体安装方式就是根据自己的jdk版本下载…

第二证券:10家央企集体行动!9月至今逾百家公司回购增持

10月16日&#xff0c;10家央企连续公告&#xff0c;掀起了新一轮回购增持潮。其间&#xff0c;5家上市公司发布新增增持方案&#xff0c;约5亿&#xff5e;16.3亿元&#xff1b;2家上市公司发布增持打开&#xff0c;估计约23.43亿元&#xff1b;1家上市公司新增回购方案&#x…

服务器数据恢复-RAID5常见故障的数据恢复方案

raid5阵列常见故障&#xff1a; 1、服务器硬件故障或者RAID阵列卡故障&#xff1b; 2、服务器意外断电导致的磁盘阵列故障&#xff1b; 3、服务器RAID阵列阵列磁盘出现物理故障&#xff0c;如&#xff1a;电路板坏、磁头损坏、盘面划伤、坏扇区、固件坏等&#xff1b; 4、误操作…

25项,2023年国家优青(港澳)入选者完整名单公布!

国家优秀青年科学基金项目&#xff08;港澳&#xff09;旨在支持香港特别行政区、澳门特别行政区&#xff08;以下简称港澳特区&#xff09;科技创新发展&#xff0c;鼓励爱国爱港爱澳高素质科技人才参与中央财政科技计划&#xff0c;为建设科技强国贡献力量&#xff0c;2023 年…

MyBatisPlus(十九)自动填充

说明 自动填充指的是&#xff0c;当数据被 插入 或者 更新 的时候&#xff0c;会为指定字段进行一些默认的数据填充。 比如&#xff0c;插入时&#xff0c;会自动填充数据的创建时间和更新时间&#xff1b;更新时&#xff0c;会自动填充数据的更新时间。 实现方式 配置处理器…

Centos中如何删除带有特殊符号的乱码文件_rz命令产生的乱码文件如何删除_使用文件号删除乱码文件---Linux运维工作笔记058

在使用rz命令进行文件上传的时候,偶尔会产生一堆的乱码文件,比如: 可以看到有一堆的乱码文件. 普通的乱码文件,直接rm -rf 文件名就可以删除了,但是有一些不行,包含特殊符号的,比如: 这个文件报错了,可以看到用rm -rf 根本删除不掉. 这个文件后面包含了一个.对吧 那该怎么解决…

python基于django的留学生服务管理平台

留学服务管理平台的用户是系统最根本使用者&#xff0c;按需要分析系统包括三类用户&#xff1a;学生、教师、管理员。这三类用户对系统的需求简要如下。技术栈 后端&#xff1a;pythondjango 前端&#xff1a;vueCSSJavaScriptjQueryelementui 开发语言&#xff1a;Python 框架…

69. x 的平方根

69. x 的平方根 原题链接&#xff1a;完成情况&#xff1a;解题思路&#xff1a;参考代码&#xff1a;1. log换底2. 二分查找3. 牛顿迭代法 原题链接&#xff1a; 69. x 的平方根 https://leetcode.cn/problems/sqrtx/description/ 完成情况&#xff1a; 解题思路&#xff…

2023年中国乳胶制品产量、需求量及市场规模分析[图]

乳胶泛指聚合物微粒分散于水中形成的胶体乳液&#xff0c;又称胶乳。习惯上将橡胶微粒的水分散体称为胶乳&#xff0c;而将树脂微粒的水分散体称为乳液。以乳胶为原料制成的制品称乳胶制品&#xff0c;常见的如海绵、手套、玩具、胶管等。 我国乳胶制品细分主要分为避孕套、乳胶…

idea不识别yaml文件导致,配置文件点击跳转不了类

文章目录 场景确认的idea安装了ymal插件,确认你的配置文件是yml格式的还是ymal格式的然后在项目配置中看看是否有对应的后缀.最后看看在项目模块里面有没有spring模块跟对应的配置文件,如果没有就要添加这样点击配置文件就能跳转到对应的实体类了 场景 在使用idea时&#xff0…

网络社区挖掘-图论部分的基本知识笔记

1 网络社区挖掘定义 网络社区挖掘是指利用数据挖掘技术和机器学习算法&#xff0c;分析社交网络、在线社区或互联网上的各种交互数据&#xff0c;以揭示其中隐藏的模式、关系和信息。这些社区可以是社交媒体平台、在线论坛、博客、微博等&#xff0c;人们在这些平台上进行交流…

智慧公厕:打破传统,解决城市痛点@中期科技

近年来&#xff0c;随着城市化进程的加速推进&#xff0c;智慧公厕成为人民生活质量提升的重要组成部分。作为一个富有创新和科技感的解决方案&#xff0c;智慧公厕不仅满足了人们对公共环境的要求&#xff0c;还提供了一系列便利的服务&#xff0c;让人们的生活更加舒适、便捷…

【vr】【unity】白马VR课堂系列-VR开发核心基础05-主体设置-手柄对象的引入和设置

【视频教学】 【白马VR课堂系列-VR开发核心基础05-主体设置-手柄对象的引入和设置】 https://www.bilibili.com/video/BV19D4y1N73i/?share_source=copy_web&vd_source=7f5c96f5a58b7542fc6b467a9824b04e 【内容】 上一节引入了XR Origin并进行了初步设置,运行测试时V…

短视频剪辑矩阵系统开发解决的市场工具难点?

短视频剪辑矩阵系统开发源码----源头搭建 一、源码技术构建源码部署搭建交付之---- 1.需要协助系统完成部署、接口全部正常接入、系统正常运行多久&#xff1f;7个工作日 2.需要准备好服务器以及备案域名 3.短视频SEO模块一年项目带宽&#xff0c;带宽最低要求10M&#xff0c;…

实验笔记之——可见光通信调制驱动芯片模组

本博文记录本团队研发出的VLC驱动调制芯片模组&#xff08;如下图所示&#xff09;的驱动调制代码烧录过程。 实物模组正面 实物模组反面 首先需要安装keil5&#xff0c;其安装与编译过程请参考博客&#xff1a;实验笔记之——单片机烧录的实验过程_烧录程序的基本步骤-CSDN博客…

Python 函数用法和底层分析

目录 1 函数简介1.1 函数的基本概念1.2 Python函数的分类 2 函数的定义和调用2.1 核心要点2.2 形参和实参2.3 文档字符串(函数的注释)2.4 返回值 3 函数也是对象&#xff0c;内存底层分析4 变量的作用域(全局变量和局部变量)5 局部变量和全局变量效率测试6 参数的传递6.1 传递可…

数据库:Hive转Presto(五)

此篇将所有代码都补充完了&#xff0c;之前发现有的代码写错了&#xff0c;以这篇为准&#xff0c;以下为完整代码&#xff0c;如果发现我有什么考虑不周的地方&#xff0c;可以评论提建议&#xff0c;感谢。代码是想哪写哪&#xff0c;可能比较繁琐&#xff0c;还需要优化。 …

如何打造智能公厕:实现智慧监测、自动化运营和智慧化管理

在现代城市里&#xff0c;公共厕所是人们不可或缺的基础设施之一。然而&#xff0c;传统的公厕管理方式已经无法满足人们对公厕的期望&#xff0c;因此需要采用智慧公厕管理系统来提升公厕服务的质量。本文将以智慧公厕领先厂家广州中期科技有限公司&#xff0c;大量精品案例现…

职场中,如何更高效地分析和解决问题(一)

要在职场取得成功&#xff0c;必须掌握多种技能。这些技能大致可分为三类&#xff1a; 一是职能性技能&#xff0c;二是分析和解决问题的技能&#xff0c;三是处理人际关系的技能。 无论在生活中还是工作中&#xff0c;我们都会面临各种问题&#xff0c;有些问题可能简单易处…