React学习笔记4: React脚手架配置代理
方式一
在package.json中追加如下配置
"proxy":"http://localhost:5000"
说明
- 优点:配置简单,前端请求资源时可以不加任何前缀。
- 缺点:不能配置多个代理。
- 工作方式:上述方式配置代理,当请求了3000不存在的资源时,那么该请求会转发给5000 (优先匹配前端资源)
方式二
第一步:创建代理配置文件
在src下创建配置文件:
src/setupProxy.js
编写
setupProxy.js
配置具体代理规则:const proxy = require('http-proxy-middleware')module.exports = function(app) {app.use(proxy('/zwse', { //zwse是需要转发的请求(所有带有/zwse前缀的请求都会转发给5000)target: 'http://localhost:5000', //配置转发目标地址(能返回数据的服务器地址)changeOrigin: true, //控制服务器接收到的请求头中host字段的值/*changeOrigin设置为true时,服务器收到的请求头中的host为:localhost:5000changeOrigin设置为false时,服务器收到的请求头中的host为:localhost:3000changeOrigin默认值为false,但一般将changeOrigin值设为true*/pathRewrite: {'^/zwse': ''} //去除请求前缀,保证交给后台服务器的是正常请求地址(必须配置)}),proxy('/htzw', { target: 'http://localhost:5001',changeOrigin: true,pathRewrite: {'^/htzw': ''}})) }
说明
- 优点:可以配置多个代理,可以灵活的控制请求是否走代理。
- 缺点:配置繁琐,前端请求资源时必须加前缀。
React学习笔记4: React脚手架配置代理相关推荐
- React学习笔记一(React入门+JSX+脚手架)
文章目录 1. React介绍和特点 1.1 React是什么 1.2 React的特点 2. React的开发依赖 2.1 React的三个依赖 2.2 Babel和React的关系 2.3 Rea ...
- React学习笔记六 React拓展 - SetState
React拓展 - setState setState更新状态的两种写法 1.setState({}, [callback]) export default class Test extends Co ...
- react学习笔记1--基础知识
什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...
- React学习笔记三 脚手架生成的index.js内容简介
React脚手架生成的index.js内容简介 import React from 'react'; import ReactDOM from 'react-dom'; import App from ...
- React学习笔记---React脚手架
React脚手架 一.使用create-react-app创建react应用 1.react脚手架 2.创建项目并启动 3.react脚手架项目结构 4.功能界面的组件化编码流程(通用) 5.用脚手架 ...
- 【学习笔记】React+React全家桶学习笔记
文章目录 1 为什么要使用React 2 React的定义 3 React的三大特性 4 React入门 4.1 hello_react 4.2 虚拟DOM的创建 4.3 JSX 4.4 模块与组件, ...
- react render没更新_web前端教程分享React学习笔记(一)
web前端教程分享React学习笔记(一),React的起源和发展:React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写 ...
- react组件卸载调用的方法_好程序员web前端培训分享React学习笔记(三)
好程序员web前端培训分享React学习笔记(三),组件的生命周期 React中组件也有生命周期,也就是说也有很多钩子函数供我们使用, 组件的生命周期,我们会分为四个阶段,初始化.运行中.销毁.错误处 ...
- React学习笔记:入门案例
React学习笔记:入门案例 React 起源于 Facebook 内部项目,因为市场上所有 JavaScript MVC 框架都不令人满意,公司就决定自己写一套,用来架设 Instagram 的网站 ...
- React学习笔记(五) 状态提升
状态提升究竟是什么东西呢?别急,下面让我们一步一步来看看究竟要怎么使用状态提升 假设我们有这样一个需求,提供两个输入框(分别属于两个组件),保证输入框里面的内容同步 好,下面我们先来封装一个输入框组件 ...
最新文章
- civil 3d 计算机配置,Civil 3D 2009安装后无法启动
- sdi线缆标准_Roland V1SDI——专业、便携、高性价比的SDI摄像机直播解决方案
- TCP分段与IP分片
- 修改mysql数据库的编码格式
- 素数环-dfs回溯+二维数组记录(c++实现)
- Ubuntu12.04 Jdk1.7 Tomct7.0部署配置
- Kuzzle,一种内部部署的文档后端
- HTML 中点击a标签,页面跳转执行过程
- docker删除镜像和删除容器
- VMware 下Linux无法上网 新增支持WIFI方式 无线连接
- 代码证年检所需资料_上海注销小规模公司所需材料及流程
- NOI数学:狄利克雷(Dirichlet)卷积
- 最近总结了串口(COM)读写操作的三种方式
- c语言删除一个字符指令,【C语言】实现一个基于命令行的文本编辑器
- 自家主机建云服务器_如何创建一台Linux云主机?
- 【POJ1442】Black Box
- DataInputStream和DataOutputStream
- java jsessionid_jsessionid怎么产生
- mysql修改登录用户名和密码_如何修改mysql的用户名和密码
- ubuntu取消代理
热门文章
- hivemetastore java,hive启动报错 hive.metastore.HiveMetaStoreClient
- java 高级数据类型_【高级数据类型】- 2.通道的更多种类
- java异常return笔试题_Java笔试面试总结—try、catch、finally语句中有return 的各类情况...
- 习题5-5 使用函数统计指定数字的个数 (15 分)
- 取名字_公司起名起名免费建筑公司取名字大全
- 计算机培训学校办学宗旨,西安软件科技培训学院简介
- luogu P3203 [HNOI2010]弹飞绵羊(LCT ? 暴力分块 ! )
- springboot自动装配原理笔记一
- 关于二叉树的链表表示的一个问题
- mysql right join实例_MySQL表LEFT JOIN左连接与RIGHT JOIN右连接的实例教程