react 脚手架配置代理
react 脚手架配置代理
方法一
在packge.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('/api1',{ // api1是需要转发的请求(所有带有 /api1 前缀的请求都会转发给5000)target:'http://localhost:5000', // 配置转发目标帝制(能返回数据的服务器地址)changeOrigin:true, // 控制服务器收到的请求头中 host 字段的值/*changeOrigin设置为true时,服务器收到的请求头中的host为:localhost:5000changeOrigin设置为false时,服务器收到的请求头中的host为:localhost:3000changeOrigin默认值为false,但我们一般将changeOrigin设置为true*/pathRewrite:{'^/api1':''} // 去除请求前缀,保证交给后端服务器的是正常请求帝制(必须配置)}),proxy('/api2',{target:'http://localhost:5000',changeOrigin:true,pathRewrite:{'^/api2':''}}))
}
说明:
- 优点:可以配置多个代理,可以灵活的控制请求是否走代理。
- 缺点:配置繁琐,前端请求资源时必须加前缀
react 脚手架配置代理相关推荐
- React学习笔记4: React脚手架配置代理
方式一 在package.json中追加如下配置 "proxy":"http://localhost:5000" 说明 优点:配置简单,前端请求资源时可以不加任 ...
- react脚手架配置代理解决跨域问题
一.问题描述: 控制台报错,出现跨域问题 二.解决方案 配置代理: 第一种配置方式: 在package.json中追加如下配置 "proxy":"http://local ...
- react脚手架配置代理总结
## 方法一 在package.json中追加如下配置 "proxy":"http://localhost:5000" 说明: 1. 优点:配置简单,前端请求资 ...
- Vue2(十一):脚手架配置代理、github案例、插槽
Vue2学习笔记:第十一章 一.脚手架配置代理 1.引出问题 2.方式一 3.方式二 二.github案例 1.App.vue 2.搜索部分Search.vue 3.显示数据部分List.vue 4. ...
- 【Vue2.0】—Vue脚手架配置代理(二十二)
[Vue2.0]-Vue脚手架配置代理(二十二) 方法一 方法二
- Vue学习记录8,vue脚手架配置代理的两种方式,Github搜索案例,vue-resource,三种插槽,Vuex及搭建Vuex环境,getter和四个map方法的使用, 模块化+命名空间
目录 vue脚手架配置代理 方法一 方法二 Github搜索案例 UserList.vue UserSearch.vue 效果图 vue-resource 插槽 默认插槽 具名插槽 作用域插槽 Vue ...
- react axios配置代理(proxy),解决本地开发时的跨域问题
前言 本文基于 "react": "^18.2.0" 1.暴露隐藏的webpack配置 react官方脚手架默认是将 webpack 配置隐藏起来了,在进行配置 ...
- react脚手架配置cdn
项目是使用react脚手架搭建的,使用了customize-cra.react-app-rewired来修改脚手架默认的配置 1.添加配置项 安装和配置完成基本的config-overrides.js ...
- Vue 脚手架配置代理
一.在 vue.config.js 中添加配置 devServer: {proxy: 'http://localhost:5000' } 优点:配置简单,请求资源时直接发送给前端(8080)即可 缺点 ...
- 【Recat 应用】之 React 脚手架
Visual Studio Code 安装 React 插件 ES7 React/Redux/GraphQL/React-Native snippets 插件 使用 create-react-app ...
最新文章
- Welsh色彩迁移算法
- JAVA类型转换问题
- 忘却的旋律java2_mc忘却的旋律启动器下载
- 系统业务逻辑书籍_「樊登读书会强推:免费送10本绝密书」彻底改变你的逻辑思维能力...
- JAVA的值传递问题
- Spark.2.2源码阅读: SPARK SUBMIT任务提交
- QT读取csv文件并且绘制折线图
- spriteatlas 白屏的问题_Discuz白屏问题解决思路
- Python 安装 lxml 插件
- java定时器表达式_Java Quartz表达式每分钟执行1次
- Excel 数据透视表教程大全之 03 刷新数据、添加多个字段作为值字段、值显示为总数的百分
- go 获取是第几周_golang判断当前时间是第几周的方法
- Vmware安装CensOS6.4
- 通过Ping检测网络故障的典型次序和IPconfig命令的使用
- 开发微信小程序都需要哪些资质?
- 本机访问VMware虚拟机中网页的方法
- 时间戳与日期年月日时分秒的转换
- php ios android 加密,在android/ios中加密,在php中解密
- STM32-(04):STM32F103VCT6芯片内部资源分析
- Java对接AD/LDAP的常见错误,以及解决办法