react脚手架配置代理
2023-09-11 14:19:39 时间
-
如果项目中就请求一个地址可以直接在package.json中配置
有点:配置简单,不用加前缀
缺点:不能配置多个代理
"proxy": "http://localhost:5000"
如果项目中需要配置多个代理
优点:可以配置多个代理
react17版本的代理配置需要在src/setupProxy.js中配置
const proxy = require('http-proxy-middleware'); module.exports = function(app) { app.use( proxy('/api1', { target: "http://localhost:5000", changeOrigin: true, // 控制服务器收到的请求头中的Host的值 如果设置为true,服务器不会知道真实的请求地址,只会知道代理的地址,如果设置为false,服务器会知道真正请求的地址 pathRewrite: {'^/api1': ''} // 重写请求路径 这个必须要加,如果不加 服务器端收到的请求地址是 /api/url 请求地址就不对了 }), proxy('/api2', { target: "http://localhost:5001", changeOrigin: true, pathRewrite: {'^/api2': ''} }) // ... ) }
react18版本的配置,主要的差异是需要用http-proxy-middleware中的createProxyMiddleware创建代理
const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function(app) { app.use( createProxyMiddleware('/api1', { target: "http://localhost:5000", changeOrigin: true, // 控制服务器收到的请求头中的Host的值 // 假如前端的服务是localhost:3000 // changeOrigin:true 时 ,服务器收到的Host是 localhost:5000 // changeOrigin:false 时 ,服务器收到的Host是 localhost:3000 pathRewrite: {'^/api1': ''} // 重写请求路径 这个必须要加,如果不加 服务器端收到的请求地址是 /api/url 请求地址就不对了 }), createProxyMiddleware('/api2', { target: "http://localhost:5001", changeOrigin: true, pathRewrite: {'^/api2': ''} }) // ... ) }
-
相关文章
- nginx负载均衡和反相代理的配置
- Nginx同时支持Http和Https的配置
- SVN的安装以及配置,包括myeclipse的SVN插件安装
- CentOS7.2网络配置
- 一段万能的nginx接口反向代理配置
- vue-cli3实现分环境打包步骤(给不同的环境配置相对应的打包命令)
- Centos 7.6配置nginx反向代理负载均衡集群
- windows下配置nodejs 在nginx下的反向代理
- nginx 反向代理 配置 https 实现http https同时存在 经测试 支持location 规则
- Centos 7.6配置nginx反向代理,直接yum安装
- reactjs脚手架配置http-proxy-middleware代理解决跨域问题
- Atitit 数据库结果集映射 ResultSetHandler 目录 1. 常见的四种配置ResultSetHandler1 2. Dbutil1 3. Mybatis 致敬3 4. H
- 在Corporate Network里配置SAP Cloud Connector连接SAP云平台,需要设置代理
- 【Android 安全】DEX 加密 ( 代理 Application 开发 | multiple-dex-core 依赖库开发 | 配置元数据 | 获取 apk 文件并准备相关目录 )
- JBoss AS7 快速配置
- (转载)Eclipse下配置Github环境 .
- git 配置代理
- Elasticsearch单机下多实例配置
- 配置Zuul代理下游的认证
- STM32 CubeMx配置DMA-HAL库
- Nginx 配置实例-反向代理案例一
- hadoop入门(九):日志聚集功能配置
- Nginx的反向代理及ssl配置
- 基于Ubuntu的Vivado(Vitis)系列软件配置教程
- 华为防火墙与三层交换机对接配置VLAN上网设置