如何在 Node.js 后端正确解析 React 前端传入的 JSON 数据

本文详解如何在 express（或类似 node.js）后端正确提取前端通过 fetch 发送的 json 请求体中的目标字段，避免将整个对象误作原始值使用，并给出完整前后端联调示例。

本文详解如何在 express（或类似 node.js）后端正确提取前端通过 `fetch` 发送的 json 请求体中的目标字段，避免将整个对象误作原始值使用，并给出完整前后端联调示例。

在构建全栈 web3 应用时，react 前端常通过 Zustand 等状态库管理链上地址（如 Chainlink 预言机合约地址 feed），再将其传递给 node.js 后端调用智能合约。但一个常见误区是：后端函数参数名与前端字段名同名，导致误将整个请求体对象当作字符串地址处理——正如问题中所示，console.log(feed) 输出的是 { feed: ‘0xD4…’ }，而非期望的纯地址字符串。

根本原因在于：Node.js 后端接收到的 req.body 是一个完整的 JSON 对象，而开发者错误地将该对象直接赋给了函数形参（如 async (feed) => { … }），从而丢失了属性解构逻辑。

✅ 正确做法是：始终从 req.body 中显式解构所需字段。以下是标准、健壮的实现方式：

✅ 后端（Node.js / Express 示例）

假设你使用 Express 框架，并已配置 express.json() 中间件（此步必不可少！）：

立即学习“前端免费学习笔记（深入）”；

// middleware (must be before route handlers) app.use(express.json()); app.use(express.urlencoded({ extended: true }));

然后定义 API 路由：

// routes/api/getPrice.js import { ethers } from 'ethers'; import { RPC, PRIVATE_KEY, CONTRACT, ABI } from '../config.js';  export const getPrice = async (req, res) => {   try {     // ✅ 正确：从 req.body 解构 feed 字段     const { feed } = req.body;      // ? 验证非空且为合法地址格式（可选但强烈推荐）     if (!feed || typeof feed !== 'string' || !ethers.utils.isAddress(feed)) {       return res.status(400).json({ error: 'Invalid or missing feed address' });     }      console.log('Resolved feed address:', feed); // → '0xD4a33860578De61DBAbDc8BFdb98FD742fA7028e'      // ? 后续合约调用（示例）     // const provider = new ethers.providers.JsonRpcProvider(RPC);     // const wallet = new ethers.Wallet(PRIVATE_KEY, provider);     // const contract = new ethers.Contract(CONTRACT, ABI, wallet);     // const price = await contract.getPrice(feed);      // res.json({ price: price.toString() });    } catch (err) {     console.error('GetPrice error:', err);     res.status(500).json({ error: 'Internal server error' });   } };

并在主应用中注册路由：

// app.js import { getPrice } from './routes/api/getPrice.js'; app.post('/api/getPrice', getPrice);

✅ 前端（React + Zustand）保持不变（但建议增强错误处理）

// hooks/usePrice.ts import useStore from '../components/store';  export async function getPrice() {   const { feed } = useStore.getState();    if (!feed) {     throw new Error('Feed address is not available in store');   }    try {     const response = await fetch('/api/getPrice', {       method: 'POST',       headers: { 'Content-Type': 'application/json' },       body: JSON.stringify({ feed }), // ✅ 正确：以对象形式发送     });      if (!response.ok) {       throw new Error(`HTTP ${response.status}: ${response.statusText}`);     }      const result = await response.json();     return result;   } catch (err) {     console.error('Failed to fetch price:', err);     throw err;   } }

⚠️ 关键注意事项

• 中间件缺失是静默失败主因：若未调用 app.use(express.json())，req.body 将为 undefined，解构会报错 Cannot destructure Property ‘feed’ of ‘undefined’。
• 不要重命名函数参数为字段名：async (feed) => { … } 是反模式；feed 是整个请求体，不是地址值。
• 始终校验输入：Web3 地址需通过 ethers.utils.isAddress() 或正则 /^0x[a-fA-F0-9]{40}$/ 验证，防止恶意输入或前端 bug 导致合约调用异常。
• 跨域与 CORS：若前端与后端端口不同（如 localhost:3000 → localhost:5000），需在后端配置 CORS 中间件（如 cors()）。

掌握这一基础数据解析逻辑，是打通 React ↔ Node.js ↔ Ethereum 合约通信链路的关键一步。后续可进一步封装为通用请求工具、添加 JWT 鉴权或异步队列处理高并发合约调用。