如何在React前端接收Strapi Webhook推送的数据？

你的Express服务已经能正常接收Strapi的Webhook数据了，要让React前端拿到这些数据，核心是通过中间服务（你的Express）做中转，下面给两种实用方案：

方案一：WebSocket实时推送（推荐，实时性强） #

这种方式能让Webhook触发时，React立刻收到数据，适合需要实时展示的场景。

1. 改造Express服务 #

• 安装依赖：npm install ws cors
• 修改index.js，添加WebSocket支持和跨域配置：

const express = require("express")
const bodyParser = require("body-parser")
const WebSocket = require('ws');
const cors = require('cors');

const app = express()
const PORT = 3001

// 允许React的3000端口跨域访问
app.use(cors({ origin: 'http://localhost:3000' }))
app.use(bodyParser.json())

// 初始化WebSocket服务，监听3002端口
const wss = new WebSocket.Server({ port: 3002 });
wss.on('connection', (ws) => {
  console.log('客户端已连接WebSocket');
  ws.on('close', () => {
    console.log('客户端断开WebSocket连接');
  });
});

// Webhook接收接口，收到数据后推送给所有连接的WebSocket客户端
app.post("/webhook", (req, res) => {
  const webhookData = req.body;
  console.log("收到Webhook数据：", webhookData);
  // 向所有在线客户端推送数据
  wss.clients.forEach((client) => {
    if (client.readyState === WebSocket.OPEN) {
      client.send(JSON.stringify(webhookData));
    }
  });
  res.status(200).end()
})

app.listen(PORT, () => console.log(`🚀 Server running on port ${PORT}`))

2. React前端实现 #

修改React项目的src/App.js，连接WebSocket并展示数据：

import { useState, useEffect } from 'react';

function App() {
  const [webhookData, setWebhookData] = useState(null);

  useEffect(() => {
    // 连接WebSocket服务器
    const ws = new WebSocket('ws://localhost:3002');
    
    ws.onmessage = (event) => {
      // 解析并更新数据
      const data = JSON.parse(event.data);
      setWebhookData(data);
    };

    ws.onclose = () => {
      console.log('WebSocket连接断开');
    };

    // 组件卸载时关闭连接
    return () => ws.close();
  }, []);

  return (
    <div className="App">
      <h1>Strapi Webhook 数据展示</h1>
      {webhookData ? (
        <pre style={{ padding: '1rem', backgroundColor: '#f5f5f5' }}>
          {JSON.stringify(webhookData, null, 2)}
        </pre>
      ) : (
        <p>等待接收Webhook数据...</p>
      )}
    </div>
  );
}

export default App;

方案二：定时请求接口获取数据（适合非实时场景） #

如果不需要实时展示，可以把Webhook数据暂存在Express服务里，React定时请求接口拉取。

1. 改造Express服务 #

• 安装依赖：npm install cors
• 修改index.js，添加数据存储和GET接口：

const express = require("express")
const bodyParser = require("body-parser")
const cors = require('cors');

const app = express()
const PORT = 3001

app.use(cors({ origin: 'http://localhost:3000' }))
app.use(bodyParser.json())

// 用变量存储最新的Webhook数据（测试用，服务重启会丢失）
let latestWebhookData = null;

app.post("/webhook", (req, res) => {
  latestWebhookData = req.body;
  console.log("收到Webhook数据：", latestWebhookData);
  res.status(200).end()
})

// 新增GET接口，返回最新的Webhook数据
app.get("/latest-webhook", (req, res) => {
  res.json(latestWebhookData);
})

app.listen(PORT, () => console.log(`🚀 Server running on port ${PORT}`))

2. React前端实现 #

修改src/App.js，定时请求接口获取数据：

import { useState, useEffect } from 'react';

function App() {
  const [webhookData, setWebhookData] = useState(null);

  useEffect(() => {
    const fetchLatestData = async () => {
      const response = await fetch('http://localhost:3001/latest-webhook');
      const data = await response.json();
      if (data) setWebhookData(data);
    };

    // 初始化请求一次
    fetchLatestData();
    // 每5秒请求一次
    const interval = setInterval(fetchLatestData, 5000);

    // 组件卸载时清除定时器
    return () => clearInterval(interval);
  }, []);

  return (
    <div className="App">
      <h1>Strapi Webhook 数据展示</h1>
      {webhookData ? (
        <pre style={{ padding: '1rem', backgroundColor: '#f5f5f5' }}>
          {JSON.stringify(webhookData, null, 2)}
        </pre>
      ) : (
        <p>等待接收Webhook数据...</p>
      )}
    </div>
  );
}

export default App;

注意事项 #

• 跨域配置：必须在Express中配置CORS，允许React的默认端口（3000）访问，否则会出现跨域错误。
• 生产环境优化：如果是生产环境，内存存储数据会随服务重启丢失，建议用数据库（如MongoDB、SQLite）持久化数据；WebSocket可替换为更成熟的Socket.io以兼容更多场景。

内容的提问来源于stack exchange，提问作者Gery