当前位置: 首页 > news >正文

React配置代理(proxy)

使用axios进行请求,而配置代理过程。
 

第一种

在package.json中,添加proxy配置项,之后所有的请求都会指向该地址
但这种方法只能配置一次,也只有一个
示例:

"proxy":"https://localhost:5000"

添加后,重启项目!!!让配置文件加载生效
然后就可以进行请求了
比如请求地址是 http://localhost:5000/api/index/index
那就可以写

axios.get("/api/index/index").then(response => {console.log('成功了',response.data);},error => {console.log('失败了',error);}
)

第二种

src中,新建setupProxy.js(必须是这个名字,react脚手架会识别),在文件中写以下配置内容(最近的项目要使用高版本这个,不然会导致项目无法启动):
http-proxy-middleware高版本(2以上):
 

const proxy = require('http-proxy-middleware')//引入http-proxy-middleware,react脚手架已经安装module.exports = function(app){app.use(proxy.createProxyMiddleware('/api',{ //遇见/api1前缀的请求,就会触发该代理配置target:'http://localhost:5000', //请求转发给谁changeOrigin:true,//控制服务器收到的请求头中Host的值pathRewrite:{'^/api':''} //重写请求路径,下面有示例解释}),proxy.createProxyMiddleware('/api2',{target:'http://localhost:5001',changeOrigin:true,pathRewrite:{'^/api2':''}}),)
}

http-proxy-middleware低版本(2以下):
 

const proxy = require('http-proxy-middleware')//引入http-proxy-middleware,react脚手架已经安装module.exports = function(app){app.use(proxy('/api',{ //遇见/api1前缀的请求,就会触发该代理配置target:'http://localhost:5000', //请求转发给谁changeOrigin:true,//控制服务器收到的请求头中Host的值pathRewrite:{'^/api':''} //重写请求路径,下面有示例解释}),proxy('/api2',{target:'http://localhost:5001',changeOrigin:true,pathRewrite:{'^/api2':''}}),)
}

写好以后,重启项目!!!
然后进行请求

假设地址是 http://localhost:5000/api/index/index

//没有开启重新路径
axios.get("/api/index/index").then(response => {console.log('成功了',response.data);},error => {console.log('失败了',error);}
)
//开启重写路径
axios.get("/api/api/index/index").then(response => {console.log('成功了',response.data);},error => {console.log('失败了',error);}
)
http://www.lryc.cn/news/137973.html

相关文章:

  • 队列(Queue):先进先出的数据结构队列
  • CentOS ens160 显示disconnected
  • 使用 ChatGPT 创建 PowerPoint 演示文稿
  • matlab将数组值划分为两类
  • 【点击新增一个下拉框 与前一个内容一样 但不能选同一个值】
  • 【Gitee提交pr】
  • 一款打工人必备的电脑端自律软件!!冲鸭打工人!!
  • 【Vue框架】 router和route是什么关系
  • 整理mongodb文档:聚合管道
  • Delphi 11.3 FMX 多设备平台中使用 TGrid 实现类似 TDBGrid 的效果
  • Qt-事件循环与QtConcurrent、QThread结合使用时注意的点
  • 基于MongoDB的空间数据存储与查询
  • jquery中pdf的上传、下载及excel导出
  • 【MyBatis】:PageHelper分页插件与特殊字符处理
  • C语言练习1(巩固提升)
  • eCharts热力图Y轴左上角少一块
  • RabbitMQ介绍
  • 玩转软件|钉钉个人版内测启动:AI探索未来的工作方式
  • 【Linux】一张图了解系统文件
  • 自动化测试平台seldom-platform部署及使用
  • 2023年8月第3周大模型荟萃
  • win11 设置小任务栏
  • 在 React 中获取数据的6种方法
  • Docker基础入门:常规软件安装与镜像加载原理
  • redis初识
  • 死锁的典型情况、产生的必要条件和解决方案
  • 日志搞不定?手把手教你如何使用Log4j2
  • 基于Googlenet深度学习网络的交通工具种类识别matlab仿真
  • R语言04-R语言中的列表
  • [Linux]进程概念