React代理配置与消息订阅发布-CSDN博客

本文链接：https://blog.csdn.net/qq_38971393/article/details/128950800

本文汇总了React项目的代理配置，包括在package.json中简单配置及创建src/setupProxy.js文件的详细说明，讨论了各自的优缺点。同时介绍了消息订阅与发布的概念，推荐使用PubSubJS库，并给出了订阅和发布消息的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、React配置代理

方式一：在package.json中进行简单配置

// package.json
"proxy":"http://localhost:5000"

说明：
1. 优点：配置简单，前端请求资源时可以不加任何前缀
2. 缺点：不能配置多个代理
3. 工作方式：上述方式配置代理，当请求了3000不存在的资源时，那么该请求会转发给5000（优先匹配前端资源）

方式二：创建配置文件 src/setupProxy.js

//src、setupProxy.js
//使用commonJs语法
const Proxy = require('http-proxy-middleware');
module.exports = function(app){
  app.use(
      proxy('/api-1',{ // api1是需要转发的请求，所有带有/api前缀的请求都会转发给5000
          target:'http://localhost:5000', // 控制服务器接收到的请求头中host字段的值
          changeOrigin:true,
          /**
           * changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
           * changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:3000
           * changeOrigin默认值为false，但我们一般将changeOrigin值设置为true
           */
          pathRewrite:{'^/api-1':''} // 去除请求前缀，保证交给后台服务器的是正常请求地址（必须配置）
      }),
      proxy('/api-2',{
          target:'http://localhost:5001',
          changeOrigin:true,
          pathRewrite:{'^/api-2':''}
      })
  )
}

说明：
1. 优点：可以配置多个代理，可以灵活地控制请求是否走代理
2. 缺点：配置繁琐，前端请求资源时必须加前缀

二、消息订阅与发布

工具库：PubSubJS
下载：npm i pubsub-js --save
使用：
- import PubSub from ‘pubsub-js’
- PubSub.subscribe(‘消息名’，function(data){…}); //订阅消息
- PubSub.publish(’消息名‘, data); //发布消息

import PubSub from 'pubsub-js'

//定义一个消息订阅的回调函数
let mySubFn = (msgName, data) = > {
	//打印消息名，数据
	console.log(msgName, data)
}

//订阅消息
let token = PubSub.subscribe('myTopic', mySubFn)

....

//发布消息
PubSub.publish('myTopic', data)

....

//取消订阅消息
PubSub.unsubscribe(token)

....

//从所有消息中取消订阅mySubFn
PubSub.unsubscribe(mySubFn)

....

//取消所有的消息订阅
PubSub.clearAllSubscriptions();