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.hqwc.cn/news/138915.html

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

相关文章

基于springboot实现酒店管理系统平台项目【项目源码+论文说明】计算机毕业设计

摘要 21世纪的今天,随着社会的不断发展与进步,人们对于信息科学化的认识,已由低层次向高层次发展,由原来的感性认识向理性认识提高,管理工作的重要性已逐渐被人们所认识,科学化的管理,使信息存…

LeetCode【74】搜索二维矩阵

题目&#xff1a; 代码&#xff1a; public static boolean searchMatrix(int[][] matrix, int target) {int rows matrix.length;int columns matrix[0].length;// 先找到行&#xff0c;行为当前行第一列<target&#xff0c;当前行1行&#xff0c;第一列>targetfor…

BIM如何通过3D开发工具HOOPS实现WEB轻量化?

随着建筑行业的数字化转型和信息建模技术的不断发展&#xff0c;建筑信息模型&#xff08;BIM&#xff09;已经成为设计、建造和管理建筑项目的标准。然而&#xff0c;BIM模型通常包含大量的数据&#xff0c;导致在Web上的传输和查看效率低下。为了解决这一挑战&#xff0c;HOO…

第9期ThreadX视频教程:自制个微秒分辨率任务调度实现方案(2023-10-11)

视频教程汇总帖&#xff1a;【学以致用&#xff0c;授人以渔】2023视频教程汇总&#xff0c;DSP第12期&#xff0c;ThreadX第9期&#xff0c;BSP驱动第26期&#xff0c;USB实战第5期&#xff0c;GUI实战第3期&#xff08;2023-10-11&#xff09; - STM32F429 - 硬汉嵌入式论坛 …

【LeetCode: 137. 只出现一次的数字 II | 位运算 | 哈希表】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…

数字签名 及 数字证书 原理笔记

这里是对 数字签名 及 数字证书 原理该视频做的一个笔记&#xff0c;链接 前言 如果对一些加密算法不懂可以参考这篇文章 数字签名 小明发送文件给小红时对文件做出签名 将文件进行hash算法加密得到hash值&#xff0c;并且对该hash值使用私钥进行加密&#xff08;私钥加密的…

汉得欧洲x甄知科技 | 携手共拓全球化布局,助力出海中企数智化发展

HAND Europe 荣幸获得华为云颁发的 GrowCloud 合作伙伴奖项&#xff0c;进一步巩固了其在企业数字化领域的重要地位。于 2023 年 10 月 5 日&#xff0c;HAND Europe 参加了华为云荷比卢峰会&#xff0c;并因其在全球拓展方面的杰出贡献而荣获 GrowCloud 合作伙伴奖项的认可。 …

【触想智能】工业级触摸显示器的分类与应用分享

工业级触摸显示器是具有触摸功能的工业显示器&#xff0c;常见的触摸方式有电容触摸和电阻触摸。它是应用在工业上的设备&#xff0c;和普通的显示器有着很大的区别。 工业级触摸显示器由液晶触摸屏、功能主板、外壳三部分组成&#xff0c;结构用料一般都采用铝合金材质&#x…

MySQL——七、MySQL备份恢复

MySQL 一、MySQL日志管理1、MySQL日志类型2、错误日志3、通用查询日志4、慢查询日志5、二进制日志5.1 开启日志5.2 二进制日志的管理5.3 日志查看5.4 二进制日志还原数据 二、MySQL备份1、备份类型逻辑备份优缺点 2、备份内容3、备份工具3.1 MySQL自带的备份工具3.2 文件系统备…

通过核密度分析工具建模,基于arcgis js api 4.27 加载gp服务

一、通过arcmap10.2建模&#xff0c;其中包含三个参数 注意input属性&#xff0c;选择数据类型为要素类&#xff1a; 二、建模之后&#xff0c;加载数据&#xff0c;执行模型&#xff0c;无错误的话&#xff0c;找到执行结果&#xff0c;进行发布gp服务 注意&#xff0c;发布g…

视频Logo添加实战:批量处理视频的技巧

在今天的教程中&#xff0c;我们将向大家介绍一种在视频上添加Logo的快捷方法。无论你是自媒体作者、视频编辑还是其他需要处理视频的从业人员&#xff0c;这个方法都将为你节省大量时间和精力。让我们一起学习如何使用固乔剪辑助手来实现这个任务。 首先&#xff0c;我们需要打…

nginx正反向代理,负载均衡

Nginx 正向代理&#xff0c;反向代理 &#xff0c;负载均衡 Nginx有两种代理协议 七层代理&#xff08;http协议&#xff09; 四层代理&#xff08;tcp/udp流量转发&#xff09; 四层代理七层代理概念 四层代理 四层代理&#xff1a;基于tcp/ip协议层的转发代理方式&#…