在react脚手架（create-react-app）中如何配置反向代理

最新推荐文章于 2023-10-17 11:13:29 发布
最新推荐文章于 2023-10-17 11:13:29 发布
阅读量2.2k 收藏 1
点赞数 1
分类专栏： React
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liuyuhua666/article/details/99175066
版权
本文介绍了如何在create-react-app中设置反向代理，包括安装http-proxy-middleware，创建src/setupProxy.js文件，并在其中进行代理配置。
摘要由CSDN通过智能技术生成

进入create-react-app官网就能看到大概的配置
在这里插入图片描述
第一步：安装 http-proxy-middleware npm或者是yarn都可以
第二步：创建 src/setupProxy.js 文件，也就是在src目录下创建setupProxy.js文件。
第三步：在 创建的setupProxy.js文件中引入http-proxy-middleware，然后配置反向代理就可以了
代码示例：

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

module.exports
最低0.47元/天 解锁文章
灯光下的投影
关注
专栏目录
create-react-app 配置代理
如故的博客
08-27 1259
create-react-app 配置代理 1、安装插件 http-proxy-middleware npm i http-proxy-middleware 2、在 src 目录下新建文件 setupProxy.js 文件 // 配置代理 - 用于联调 const { createProxyMiddleware } = require('http-proxy-middleware') console.log('PROXY: ', process.env.PROXY_ENV) module.exports
【重点突破】—— create-react-app&React组件化思想
柳柳66的博客
02-03 305
前言：正在学习react大众点评项目课程的todoList应用阶段，学习react、redux、react-router基础知识。 一、 React项目脚手架：create-react-app 新建项目： npx create-react-app 项目名 注：(npm >= 5.2 )　　 三个依赖：react、react-dom、react-scripts 四...
在react脚手架中设置反向代理
qq_35629054的博客
06-24 918
我在这里用了http-proxy-middleware包（需要执行cnpm i http-proxy-middleware --save -dev），当然大家也可以用其他方式：如node、nginx、等等我就不再一一描述了，教大家最简单暴力的 1.在src下创建一个setupProxy.js的js文件，此文件创建后会自动被config->paths.js使用 2.然后在setupProxy.js写如下代码（2020-6-23日下载的版本） const { createProxyMiddleware
create-react-app配置代理
我不写文章，我只是文章的搬运工
02-28 1136
用create-react-app搭建最基本的脚手架，如果想配置代理，可以在src下面创建setupProxy.js ( 默认这个名字，可以打开webpack配置能看到 ) const { createProxyMiddleware } = require("http-proxy-middleware"); module.exports = function (app) { app.use( "/api", createProxyMiddleware({ target: "服
react开发环境代理配置
qq_35728142的博客
10-18 340
【代码】react开发环境代理配置。
react配置反向代理
故里的博客
08-04 113
1.安装 http-proxy-middleware npm http-proxy-middleware --save 2.在项目目录src文件夹下新建setupProxy.js文件，然后写入如下代码: const { createProxyMiddleware } = require("http-proxy-middleware"); module.exports = function(app) { app.use( createProxyMiddleware ("/api", {
create-react-app脚手架 - 跨域proxy、反向代理
u010565037的博客
09-29 1220
在做前后端分离的项目的时候，调用接口我们都会遇到跨域的问题。解决跨域问题可以后台设置cros(跨域资源共享)，如果前端解决的话可以使用代理，接下来一起来看一下create-react-app脚手架下如果配置 一、只代理一个 在package.json文件中增加如下配置： "proxy": "http://www.wyunfei.com" // 配置你要请求的服务器地址 { "...
【重点突破】—— react使用http-proxy-middleware反向代理跨域
柳柳66的博客
02-03 2566
create-react-app脚手架低于2.0版本时候，可以使用对象类型 "proxy": { "/api": { "target": "http://localhost:5000", "changeOrigin": true } } 最新的create-react-app脚手架2.0版本以上只能配置string类型 "proxy": "h...
react脚手架、使用步骤、在react脚手架里做项目的步骤、反向代理
CIA的博客
11-21 1297
脚手架 facebook的官方脚手架 1、安装 create-react-app （CRA） npm install create-react-app -g yarn global add create-react-app 安装yarn 方法一：使用安装包安装 [官方下载安装包](https://yarnpkg.com/zh-Hans/docs/install) 安装完毕后，一定要配置环境变量。 方法二：使用npm安装 npm i yarn -g -i：install -g：全局安装（gl
React create-react-app 里配置代理（解决跨域）
最新发布
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
10-17 3271
其实 cra里给了个简单的配置代理 就是在package.json里加上proxy就行了。修改时需要 npm start重新运行一下，要不然可能不生效。proxy只能以 http:// 或https://开头 否则会报：示例：比如后端给的完整地址如下：这一段是相同的地址（也就是所有接口都是这个前缀），根据你的接口来定。然后使用即可 比如 axios url直接请求就行代码如下：request就是axios 只是我又封装了一层。
react-app-rewired：在不弹出的情况下覆盖create-react-app webpack配置
02-05
:information_selector: 在向此存储库提交问题之前-确保此存储库中的代码存在问题，而不是如何使用Webpack问题配置某些内容（在Stack Overflow或Spectrum上发布内容）。 这是您“拥有”它的配置。 :police_car_light: 2.0版删除了重新接线助手功能 在不使用'eject'且未创建react-scripts分支的情况下，调整create-react-app webpack配置。 create-react-app的所有好处没有“ no config”的限制。 您可以根据需要添加插件，加载程序。 重新连线您的应用程式 :skull_and_crossbones: 从Create React App 2.0开始，此仓库主要由社区“轻”维护。 :warning_selector:
React 脚手架 create-react-app 新版使用说明 重点是配置代理
FungLeo's Blog
12-07 7378
React 脚手架 create-react-app 新版使用说明 重点是配置代理 近期更新了一下 create-react-app 工具，然后发现，和原来的老版本使用出现了略微的差异。比如原先想要处理 sass 还需要去手动配置 webpack 但是新版里面已经集成了。此外，代理的配置也完全不一样了。因此，如果是看我之前的 react 简明教程的话，是会出现一些不一样的地方的。因此，我重新来整理...
React中的反向代理（React脚手架），解决跨域问题。
mishuo24的博客
01-11 585
一、当前脚手架项目下安装 （脚手架也可能已经帮你安装过了） npm i http-proxy-middleware --save -dev 二、创建文件 ./src/setupProxy.js 在src文件夹下面创建setupProxy.js文件 三、编辑setupProxy.js 文件文件内容 const {createProxyMiddleware} = require('http-proxy-middleware') module.exports = function(app) {.
React 反向代理
ma33xiao的博客
03-11 869
一、安装 npm install http-proxy-middleware --save 二、在src目录下创建setupProxy.js文件 三、编写setupProxy.js代码 **注意：**每次编写完setupProxy.js文件后都要重启服务器 const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function (app) { app.use( '/api
react使用反向代理
柏悦的博客
11-29 395
下载http-proxy-middleware $ npm install http-proxy-middleware --save $ # or $ yarn add http-proxy-middleware 创建src/setupProxy.js const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function(app) { app.use( '/api',.
react-create-app的零散配置（sass，反向代理）
Zhooson的博客
07-18 611
下载官方的脚手架执行 npm eject的方法打开脚手架配置文件 sass 的配置 cnpm i node-sass sass-loader --save 同时修改webpack的相关配置 添加如图示的一些代码即可，npm start 重启即可使用sass了 { test: /\.scss$/, loaders: ['style-loader', 'css-loa...
create-react-app 中设置反向代理、项目打包资源引入路径设置及 map 文件
ddr66288的博客
06-13 909
1、配置反向代理 （1）porxy 配置一个代理 　　修改package.json文件 "proxy":"http://teng.com/website/web", （2）proxy配置多个代理 　　注意：若create-react-app 的版本在低于 2.0 的时候可以在 package.json 增加 proxy 配置即可， 配置成如下 "name": ...
react配置 反向代理
tby_pr的博客
11-20 1281
跨域解决方案 jsonp(模拟get)/CORS(跨域资源共享)靠死/代理/iframe/postMessage/window.name/WebSocket react的代理实现跨域 在配置在src/setupProxy.js文件，并通过npm安装http-proxy-middleware,代理中间件模块 创建 src/setupProxy.js 安装模块 npm i -S http-proxy-middleware const {createProxyMiddlewar...
React配置代理的5种方法
一步一个脚印，踏实努力，向着目标前进
08-26 4338
使用场景：适用于使用create-react-app创建的React项目，特别是小型项目或快速原型开发。优点：配置简单，无需额外安装依赖，适合快速开发和简单项目。缺点：功能相对较少，只能配置一个代理。使用场景：适用于需要更灵活的代理配置，可以根据需求配置多个代理的中等规模项目。优点：配置灵活，可以根据需求配置多个代理，支持更多的选项和自定义功能。缺点：需要额外安装依赖，相对于create-react-app的代理配置略复杂。
快速上手React开发：create-react-app脚手架详解
在开发React应用时，传统的手动引入React...create-react-app凭借其易用性、高效性和官方背书，已经成为开发React应用的首选脚手架工具，极大地降低了前端开发的门槛，使得开发者能够更快地投入到实际的业务开发中。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值