React配置代理方式(proxy)

 更新时间:2024年07月12日 08:47:47   作者:苦夏木禾  
这篇文章主要介绍了React配置代理方式(proxy),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

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);}
)

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • react如何实现表格多条件搜索

    react如何实现表格多条件搜索

    这篇文章主要介绍了react如何实现表格多条件搜索问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • React Fiber 架构解决页面卡顿问题的全过程

    React Fiber 架构解决页面卡顿问题的全过程

    本文从问题与目标、核心数据结构、调度与中断、渲染阶段与提交阶段、优先级与 lanes、并发特性到常见误区与优化建议,全景式拆解 React Fiber,为何它能够显著降低交互卡顿并提升可响应性,感兴趣的朋友跟随小编一起看看吧
    2025-12-12
  • React Hooks - useContetx和useReducer的使用实例详解

    React Hooks - useContetx和useReducer的使用实例详解

    这篇文章主要介绍了React Hooks - useContetx和useReducer的基本使用,本文通过实例代码给大家讲解的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-11-11
  • React子组件调用父组件的方法

    React子组件调用父组件的方法

    本文主要介绍了React子组件调用父组件的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-08-08
  • React如何实现视频旋转缩放

    React如何实现视频旋转缩放

    这篇文章主要为大家详细介绍了React如何实现视频旋转缩放功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-11-11
  • react如何解决Hooks闭包陷阱解决方案

    react如何解决Hooks闭包陷阱解决方案

    在React中使用Hooks时,开发者可能会遇到一些常见的坑点,这篇文章主要介绍了react如何解决Hooks闭包陷阱的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2026-05-05
  • React组件三大核心属性State props Refs介绍

    React组件三大核心属性State props Refs介绍

    组件实例的三大核心属性是:State、Props、Refs。类组件中这三大属性都存在。函数式组件中访问不到 this,也就不存在组件实例这种说法,但由于它的特殊性(函数可以接收参数),所以存在Props这种属性
    2023-02-02
  • 详解React中多种组件通信方式的实现

    详解React中多种组件通信方式的实现

    在React中,组件之间的通信是一个非常重要的话题,React提供了几种方式来实现跨组件通信,下面小编将详细讲讲其中几种通信方式,并提供实际的代码示例,需要的可以参考下
    2023-11-11
  • react项目自行配置热更新的实现

    react项目自行配置热更新的实现

    本文主要介绍了react项目自行配置热更新的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-11-11
  • react redux中如何获取store数据并将数据渲染出来

    react redux中如何获取store数据并将数据渲染出来

    这篇文章主要介绍了react redux中如何获取store数据并将数据渲染出来,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08

最新评论