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

最新推荐文章于 2023-10-17 11:13:29 发布
原创 最新推荐文章于 2023-10-17 11:13:29 发布 · 2.2k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了如何在create-react-app中设置反向代理，包括安装http-proxy-middleware，创建src/setupProxy.js文件，并在其中进行代理配置。

进入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 = function
最低0.47元/天 解锁文章
create-react-app 配置代理
如故的博客
08-27 1379
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 355
前言：正在学习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 986
我在这里用了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 1199
用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 390
【代码】react开发环境代理配置。
create-react-app配置代理方法
sikies的博客
05-29 1497
creat-react-app下配置代理的方法： 安装http-proxy-middleware $ npm install http-proxy-middleware --save 在根目录的src下创建src/setupProxy.js文件，然后写入下边内容。 const proxy = require('http-proxy-middleware'); module.exports = function (app) { app.use( proxy('/api',{
create-react-app脚手架 - 跨域proxy、反向代理
u010565037的博客
09-29 1275
在做前后端分离的项目的时候，调用接口我们都会遇到跨域的问题。解决跨域问题可以后台设置cros(跨域资源共享)，如果前端解决的话可以使用代理，接下来一起来看一下create-react-app脚手架下如果配置 一、只代理一个 在package.json文件中增加如下配置： "proxy": "http://www.wyunfei.com" // 配置你要请求的服务器地址 { "...
【重点突破】—— react使用http-proxy-middleware反向代理跨域
柳柳66的博客
02-03 2672
create-react-app脚手架低于2.0版本时候，可以使用对象类型 "proxy": { "/api": { "target": "http://localhost:5000", "changeOrigin": true } } 最新的create-react-app脚手架2.0版本以上只能配置string类型 "proxy": "h...
react-nginx-example:关于如何在 NGINX 上运行 React 项目的示例项目
05-29
在现代Web开发中，React作为一个流行的JavaScript库，用于构建用户界面，而NGINX则是一种高性能的HTTP服务器和反向代理。"react-nginx-example"项目是为了解决如何将React应用部署到NGINX服务器上的问题。在这个项目...
react配置反向代理
故里的博客
08-04 141
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", {
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 里配置代理（解决跨域）
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
10-17 4033
其实 cra里给了个简单的配置代理 就是在package.json里加上proxy就行了。修改时需要 npm start重新运行一下，要不然可能不生效。proxy只能以 http:// 或https://开头 否则会报：示例：比如后端给的完整地址如下：这一段是相同的地址（也就是所有接口都是这个前缀），根据你的接口来定。然后使用即可 比如 axios url直接请求就行代码如下：request就是axios 只是我又封装了一层。
React 脚手架 create-react-app 新版使用说明 重点是配置代理
FungLeo's Blog
12-07 7572
React 脚手架 create-react-app 新版使用说明 重点是配置代理 近期更新了一下 create-react-app 工具，然后发现，和原来的老版本使用出现了略微的差异。比如原先想要处理 sass 还需要去手动配置 webpack 但是新版里面已经集成了。此外，代理的配置也完全不一样了。因此，如果是看我之前的 react 简明教程的话，是会出现一些不一样的地方的。因此，我重新来整理...
React中的反向代理（React脚手架），解决跨域问题。
mishuo24的博客
01-11 641
一、当前脚手架项目下安装 （脚手架也可能已经帮你安装过了） 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 935
一、安装 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 422
下载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 649
下载官方的脚手架执行 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 998
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 1330
跨域解决方案 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...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值