返回顶部
首页 > 资讯 > 前端开发 > JavaScript >react脚手架配置代理的实现
  • 368
分享到

react脚手架配置代理的实现

react脚手架react脚手架代理 2023-02-24 11:02:46 368人浏览 独家记忆
摘要

目录方法一方法二方法一 在package.JSON 中追加如下配置 "proxy":"Http://localhost:5000" 说明: 优点: 配置简单,前端请求资源时可以不加

方法一

在package.JSON 中追加如下配置

"proxy":"Http://localhost:5000"

说明:

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

缺点:不能配置多个代理

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

方法二

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

在src下创建配置文件: 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脚手架配置代理内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: react脚手架配置代理的实现

本文链接: https://lsjlt.com/news/197385.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • react脚手架配置代理的实现
    目录方法一方法二方法一 在package.json 中追加如下配置 "proxy":"http://localhost:5000" 说明: 优点: 配置简单,前端请求资源时可以不加...
    99+
    2023-02-24
    react脚手架 react脚手架代理
  • react脚手架配置代理如何实现
    这篇文章主要介绍“react脚手架配置代理如何实现”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“react脚手架配置代理如何实现”文章能帮助大家解决问题。方法一在package.json 中追加如下...
    99+
    2023-07-05
  • 如何基于脚手架配置Angular代理
    本篇内容介绍了“如何基于脚手架配置Angular代理”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!Angu...
    99+
    2024-04-02
  • react脚手架配置路径别名的方法
    文章写时react版本16.13.1 1输入命令 npm run eject 在项目根目录下生成config目录 2在confilg下打开webpack.config.js文件找...
    99+
    2024-04-02
  • Vue脚手架如何配置代理服务器
    本文小编为大家详细介绍“Vue脚手架如何配置代理服务器”,内容详细,步骤清晰,细节处理妥当,希望这篇“Vue脚手架如何配置代理服务器”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。1 前言注意:Vue脚手架给我们提...
    99+
    2023-07-04
  • Vue脚手架配置代理服务器的两种方式(小结)
    目录1 前言2 代理两个误区(坑)误区1误区2vue脚手架配置方式2/api和targetpathRewritewschangeOrigin配置多个代理3 vue脚手架配置代理总结1...
    99+
    2023-01-08
    Vue脚手架配置代理服务器 Vue 配置代理服务器
  • React脚手架搭建的学习
    一、前端工程的复杂化 如果我们只是开发几个小的demo程序,那么永远不需要考虑一些复杂的问题: 比如目录结构如何组织划分;比如如何管理文件之间的相互依赖;比如如何管理第三方模块的依...
    99+
    2024-04-02
  • 关于react的代理配置(可配置多个代理)
    目录react的代理配置第一种写在package.json中(不推荐)第二种 建立 setupProxy.js,注意必须是这个文件名总结react的代理配置 第一种写在package...
    99+
    2022-12-08
    react代理配置 react配置多个代理 react配置代理
  • vue脚手架配置es6转es5
    随着前端技术的快速发展,ES6已经成为了前端开发的主流语言之一。然而,在实际开发中,我们仍然需要考虑兼容性问题,因为不同的浏览器对ES6的支持程度存在差异。为了解决这个问题,我们需要将ES6代码转换为ES5代码。本文将会介绍如何在Vue项目...
    99+
    2023-05-24
  • react脚手架的概念是什么
    本篇内容介绍了“react脚手架的概念是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2024-04-02
  • 从零搭建Webpack5-react脚手架的实现步骤(附源码)
    目录webpack5 正式开始 搭建指南开始搭建完成了依赖的准备工作,开始搭建项目编写webpack.dev.js开发配置 开始编写webpack.prod.js生产配置编写scri...
    99+
    2024-04-02
  • vue-cli3脚手架如何配置使用
    这篇文章将为大家详细讲解有关vue-cli3脚手架如何配置使用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。Vue CLI 是一个基于 Vue.js 进行快速开发的完整系...
    99+
    2024-04-02
  • React Native 脚手架的基本使用详解
    构建项目 在相应的路径下执行命令行:react-native init 项目名 (名称不可使用连接符等特殊字符,命名可以参考APP应用名称 比如 FaceBook) react-...
    99+
    2024-04-02
  • webpack5搭建一个简易的react脚手架项目实践
    目录项目初始化安装webpack搭建脚手架目录结构开启本地服务配置css&sass安装react的相关依赖项目添加热更新生产环境打包总结项目初始化 首先我们创建一个目录,初始...
    99+
    2024-04-02
  • React配置子路由的实现
    1、组件First.js下有子组件: import Admin from './Admin' import FormCom from './FormCom' import One...
    99+
    2024-04-02
  • vue脚手架配置预渲染及prerender-spa-plugin配置方式
    目录脚手架配置预渲染及prerender-spa-plugin配置脚手架2.0:(自己的是2.0)脚手架3.0 (未验证,应该行)记录vue预渲染prerender-spa-plug...
    99+
    2024-04-02
  • React配置多个代理实现数据请求返回问题
    目录使用axios以及express框架进行数据传输App.js:index.js:server1.js:server2.jssetupProxy.js:运行使用axios以及exp...
    99+
    2024-04-02
  • vscode怎么实现脚手架插件
    本篇内容介绍了“vscode怎么实现脚手架插件”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!安装使用vscode 安装 lowcode 插件...
    99+
    2023-06-30
  • React前端框架实现原理的理解
    目录vdomdsl 的编译渲染 vdom组件状态管理react 架构的演变fiber 架构总结vdom react 和 vue 都是基于 vdom 的前端框架,我们先聊下 vdom:...
    99+
    2024-04-02
  • 怎么实现自己的脚手架工具
    这篇文章将为大家详细讲解有关怎么实现自己的脚手架工具,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。脚手架工具什么是脚手架工具工程化中,最重要的就是脚手架工具了,什么是脚手架工具呢生活中其实很常见:比如写一...
    99+
    2023-06-15
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作