React向部署在Firebase的Node.js后端发送数据以调用API的问题排查

核心问题其实很直观：你的前端用POST方法发送请求，但后端对应的是GET路由——而GET请求是没有请求体（request.body）的，所以后端根本拿不到你传的favorites数据。下面是具体的修复步骤：

1. 修复后端Node.js代码 #

首先要把路由方法改成post，同时必须添加express.json()中间件（Express默认不会自动解析JSON格式的请求体），这样才能正确读取前端传来的数据：

const functions = require("firebase-functions");
const express = require("express");
const fetch = require("node-fetch");
const cors = require("cors");
const app = express();

app.use(cors({origin: true}));
// 新增：解析JSON格式的请求体，这一步必不可少
app.use(express.json());

// 把app.get改为app.post，和前端请求方法匹配
app.post('/', async (request, response) => {
  try {
    // 现在可以正常拿到前端传的favorites了
    const favorites = request.body.favorites;
    // 用模板字符串拼接URL更清晰
    const url = `${web}${favorites}${key}`;
    
    const fetchResponse = await fetch(url);
    const symbol = await fetchResponse.json();
    response.json(symbol);
  } catch (error) {
    // 新增错误处理，方便排查API调用或请求过程中的问题
    response.status(500).json({error: error.message});
  }
});

2. 优化前端React代码（可选但推荐） #

前端的请求逻辑本身没问题，但可以加上错误处理，避免请求失败时没有任何提示：

componentDidMount() {
  fetch('http://localhost:5001/', {
    method: 'post',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({ favorites: this.state.favorites})
  })
  .then((response) => {
    // 先检查响应状态是否正常
    if (!response.ok) {
      throw new Error(`请求失败，状态码: ${response.status}`);
    }
    return response.json();
  })
  .then(stockList => {
    this.setState({ stocks: stockList });
    console.log(stockList);
  })
  .catch(error => {
    // 捕获请求或解析过程中的错误
    console.error('数据请求出错:', error);
  });
}

为什么之前硬编码能工作？ #

之前你直接在后端硬编码API参数时，用的是GET路由——GET请求不需要依赖请求体，后端可以直接用硬编码的参数调用第三方API，所以功能正常。现在要传递前端的数据，就必须保证请求方法和路由匹配，同时让后端正确解析请求体。

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