我的编程空间,编程开发者的网络收藏夹
学习永远不晚

react脚手架配置代理的实现

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

react脚手架配置代理的实现

方法一

在package.json 中追加如下配置

"proxy":"http://localhost:5000"

说明:

优点: 配置简单,前端请求资源时可以不加任何前缀。

缺点:不能配置多个代理

工作方式: 当请求了 3000 不存在的资源时,那么该请求会转发给5000(优先匹配前端资源)

方法二

创建代理配置文件,文件名为 setupProxy.js 名字不能改

在class="lazy" data-src下创建配置文件: class="lazy" data-src/setupProxy.js

编写setupProxy.js 配置具体代理规则:

const proxy = require('http-proxy-middleware')
module.exports = function(app) {
    app.use(
        proxy('/api1',{ // api1 是需要转发的请求(所有带有 /api1 前缀的请求都会转发给 5000)
            target: 'http://localhost:5000', // 配置转发目标地址(返回数据的服务器地址)
            changeOrigin: true, // 控制服务器接收到的请求头中 host字段的值
            
            pathRewrite:{
                '^/api1':'' // 去除请求前缀,保证交给后台服务器的是正常的请求地址(必须配置)
            }
        }),
        proxy('/api2',{
            target: 'http://localhost:5001',
            changeOrigin: true,
            pathRewrite:{
                '^/api2':''
            }
        })
    )
}

说明:

优点:可以配置多个代理,可以灵活的控制请求是否走代理,

缺点: 配置繁琐,前端请求资源时必须加前缀

到此这篇关于react脚手架配置代理的实现的文章就介绍到这了,更多相关react脚手架配置代理内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

react脚手架配置代理的实现

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

react脚手架配置代理的实现

本文主要介绍了react脚手架配置代理的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2023-02-24

react脚手架配置代理如何实现

这篇文章主要介绍“react脚手架配置代理如何实现”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“react脚手架配置代理如何实现”文章能帮助大家解决问题。方法一在package.json 中追加如下
2023-07-05

Vue脚手架如何配置代理服务器

本文小编为大家详细介绍“Vue脚手架如何配置代理服务器”,内容详细,步骤清晰,细节处理妥当,希望这篇“Vue脚手架如何配置代理服务器”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。1 前言注意:Vue脚手架给我们提
2023-07-04

Vue脚手架配置代理服务器的两种方式(小结)

本文主要介绍了Vue脚手架配置代理服务器的两种方式(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2023-01-08

关于react的代理配置(可配置多个代理)

这篇文章主要介绍了关于react的代理配置(可配置多个代理),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
2022-12-08

原理解析:如何实现自己的脚手架工具?

比如写一个网站,最开始都是从零开始的,后面再写一个相同类型的网站时,就可以将之前的代码直接复制过来了。如果将可以复制的这些内容抽离出来,每次开发新东西,都能自动生成就好了。

怎么实现自己的脚手架工具

这篇文章将为大家详细讲解有关怎么实现自己的脚手架工具,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。脚手架工具什么是脚手架工具?工程化中,最重要的就是脚手架工具了,什么是脚手架工具呢?生活中其实很常见:比如
2023-06-15

多项目集成下的工程脚手架配置方案

写本文的目的主要是给大家提供一种思路,以后在遇到工程需要定制化的时候就可以通过更改脚手架的配置来实现。

React中配置子路由的实现方法

这篇文章将为大家详细讲解有关React中配置子路由的实现方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。1、组件First.js下有子组件:import Admin from ./Adminimport
2023-06-15

Flutter配置代理抓包如何实现

今天小编给大家分享一下Flutter配置代理抓包如何实现的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。背景在开发Flutte
2023-07-05

编程热搜

目录