react脚手架中设置正向代理

最新推荐文章于 2025-01-13 11:27:50 发布
原创 最新推荐文章于 2025-01-13 11:27:50 发布 · 460 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react #reactjs

本文详细介绍如何在React项目中使用create-react-app脚手架创建项目，并安装http-proxy-middleware插件来配置正向代理。步骤包括：1. 使用脚手架创建项目；2. 安装http-proxy-middleware插件；3. 在src目录下创建setupProxy.js文件并进行代理配置。通过这些步骤，开发者可以轻松地为React项目设置代理，以便在开发过程中更方便地调用后端API。

1.首先配置安装脚手架环境

# create-react-app my-app

在这里插入图片描述

2.脚手架安装完毕后，安装插件http-proxy-middleware

# npm i http-proxy-middleware

3.http-proxy-middleware安装完后会在src多出一个文件setupTest.js在它的同级目录下新建一个setupProxy.js 结构如下

在这里插入图片描述

4.在setupProxy.js中进行如下配置：

在这里插入图片描述

5.重新启动项目就可以实现正向代理了

如有疑问可以参考http-proxy-middleware插件官方文档：
https： //github.com/chimurai/http-proxy-middleware/tree/v0.21.0#readme

孤浪漂泊
关注
对 React 组件进行单元测试（unit testing）
weixin_34238633的博客
11-22 625
2019独角兽企业重金招聘Python工程师标准>>> ...
React脚手架配置代理
weixin_49094787的博客
03-27 215
react脚手架配置代理总结 方法一 在package.json中追加如下配置 "proxy":"http://localhost:5000" 说明： 优点：配置简单，前端请求资源时可以不加任何前缀。 缺点：不能配置多个代理。 工作方式：上述方式配置代理，当请求了3000不存在的资源时，那么该请求会转发给5000 (优先匹配前端资源) 方法二 第一步：创建代理配置文件 在src下创建...
react脚手架中配置代理（正向代理）.html
02-26
react脚手架中配置代理（正向代理）
react脚手架配置代理
weixin_41184962的博客
02-03 217
工作方式： 当请求了 3000 不存在的资源时，那么该请求会转发给5000（优先匹配前端资源）创建代理配置文件，文件名为 setupProxy.js 名字不能改。优点：可以配置多个代理，可以灵活的控制请求是否走代理，优点： 配置简单，前端请求资源时可以不加任何前缀。在package.json 中追加如下配置。缺点： 配置繁琐，前端请求资源时必须加前缀。缺点：不能配置多个代理。
React应用测试与部署指南：Create React App入门
首先，Create React App是一个流行的脚手架工具，用于快速启动新的React项目。它预配置了开发环境，包括开发服务器、测试运行器和构建工具。这为开发人员提供了一个无需手动配置的起点。 - **yarn start**：运行这...
基于React的多维度数据可视化框架，集成词云与动态图表
该文件标题为“标准化数据可视化开发框架，集成词云生成器与多维度分析图表【全源码提供】”，结合其详细的描述、技术标签（React、Node.js）以及压缩包中的文件结构，可以提炼出一个完整、系统化的现代前端数据可视...
基于React与Chakra UI的邀请组件前端实现
CRA是React官方推荐的脚手架工具，能够快速初始化一个配置齐全的React项目，内置Webpack、Babel、ESLint等现代前端构建工具链，极大提升了开发效率。特别地，作者选择了带有TypeScript模板的CRA命令（`npx create-...
React 脚手架配置代理完整指南
涂涂
12-27 1141
【代码】React 脚手架配置代理完整指南。
【react】记录react脚手架中配置代理
最新发布
bbt953的博客
01-13 180
记录react脚手架中配置代理
Reac03:react脚手架配置(代理配置)
Java修炼者的博客
01-01 559
reactAjax配置
react脚手架配置代理总结
m0_45382009的博客
11-26 387
react脚手架配置代理总结 方法一： 在package.json中追加配置： "proxy":"http://localhost:5000", 自己项目的服务器地址 说明： 优点：配置简单； 缺点：前端请求资源时不可以加任何前缀；不能配置多个代理，（比如有 两台以上的服务器） 工作方式：当请求了前端项目地址不存在的资源时（比如前端项目运行在3000），会转发给5000，优先匹配前端资源。 方法二： 第一步：创建代理配置文件 //在src下创建配置文件：src/setupProxy.js
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值