React 使用 Proxy 代理(create-react-app)
时间:2022-07-22
本文章向大家介绍React 使用 Proxy 代理(create-react-app),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
在create-react-app 中配置proxy代理
proxy,默认为NULL,类型为URL,一个为了发送http请求的代理
在平时开发时,尤其前后端分离时,需要假数据来进行模拟请求,这个时候就需要proxy
代理来处理
create-react-app < 2.0
package.json 中配置
"proxy":{
"/api/**":{
"target":"https://easymock.spiritling.pub/",
"changeOrigin": true
}
}
create-react-app > 2.0
package.json 中配置(不推荐)
"proxy": "https://easymock.spiritling.pub/",
配置文件 /src/setupProxy.js
(推荐)
将 create-react-app
解包后,可以在 config
文件夹下找到配置
在 config/path.js
中存在 proxySetup: resolveApp('src/setupProxy.js'),
而 proxySetup
是只在 webpackDevServer.config.js
文件中使用,也就是说只在开发时使用
所以,可以在 /src/setupProxy.js 中配置
首先安装 http-proxy-middleware
npm install http-proxy-middleware -D
然后文件配置
const proxy = require('http-proxy-middleware');
module.exports = function (app) {
app.use(
'/api/v1/',
proxy({
target : 'https://easymock.spiritling.pub/',
changeOrigin : true, // 设置跨域请求
PathRewrite : {
'^/api/v1' : '' // 将/api/v1 变为 ''
}
})
);
};
使用例子
01
const proxy = require('http-proxy-middleware');
module.exports = function (app) {
app.use(
'/api/v1/',
proxy({
target : 'https://easymock.spiritling.pub/',
changeOrigin : true
})
);
};
游览器中请求为 https://example.com/api/v1/login
则经过代理后可以转为 https://easymock.spiritling.pub/api/v1/login
02
const proxy = require('http-proxy-middleware');
module.exports = function (app) {
app.use(
'/api/v1/',
proxy({
target : 'https://easymock.spiritling.pub/',
changeOrigin : true,
PathRewrite : {
'^/api/v1' : ''
}
})
);
};
游览器中请求为 https://example.com/api/v1/login
则经过代理后可以转为 https://easymock.spiritling.pub/login
http-proxy-middleware
新版本 ≧ 1.0.0
在新版本大于等于 1.0.0 时使用会出现如下问题
proxy is not a function
也就是说 http-proxy-middleware
或者 setupProxy
会出现报错 proxy is not a function
所以需要使用新版本的写法才可以
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function (app) {
app.use(createProxyMiddleware('/api/v1', {
target : 'https://easymock.spiritling.pub',
changeOrigin : true,
ws: true,
pathRewrite : {
'^/api/v1' : ''
},
}));
};
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android编程使用光线传感器获取光线强弱的方法【LightSensorManager封装类】
- Android开发中的重力传感器用法实例详解
- 腾讯云TKE-Ingress案例: Nginx-Ingress 实现grpc转发
- 机器人软件中间层 yarp-Yet Another Robot Platforms
- 3分钟短文:Laravel写个命令行,你就是下一个Geek!
- Android开发多年每天Crud不清楚自己的技术?来刷刷大厂的高端技术面试题就知道了
- MySQL案例:count(*)效率优化
- MUI进行APP混合开发实现下拉刷新和上拉加载 原创
- Android 给控件添加边框阴影效果
- 详解Android Selinux 权限及问题
- Android图片采样缩放功能实例代码
- Android开发中使用Intent打开第三方应用及验证可用性的方法详解
- Android 7.0开发获取存储设备信息的方法
- Android中默认系统的声音/大小修改和配置详解
- Android开发中计算器的sin、cos及tan值计算问题分析