后端数据无法传至前端，已尝试多方案仍未解决

问题现状 #

• 后端调用Google Places API可正常获取评论数据（控制台已打印reviews内容）
• 前端无法接收后端/api/reviews接口返回的数据
• 已尝试方案：添加CORS配置、设置代理服务器、在useEffect中添加错误捕获，均未解决问题
• 排查时长：5小时

后端代码（已省略API密钥与place_id） #

const express = require('express');
const axios = require('axios');
const app = express();
const path = require('path'); // Include the path module

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'public/index.html')); // Replace 'public' with your actual folder name
});
app.get('/api/reviews', async (req, res) => {
  const apiKey = 'API_KEY';
  const placeId = 'PLACE_ID';
  const url = `https://maps.googleapis.com/maps/api/place/details/json?place_id=${placeId}&key=${apiKey}`;

  try {
    const response = await axios.get(url);
    console.log(response);
    const reviews = response.data.result.reviews;
    res.json(reviews); // Send the reviews as JSON
    console.log(reviews);
  } catch (error) {
    console.error('Error fetching Google reviews:', error);
    res.status(500).json({ error: 'Failed to fetch reviews' });
  }
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

排查步骤与修复方案 #

1. 验证前端请求地址正确性 #

确认前端请求的URL为http://localhost:3000/api/reviews，若前端运行在其他端口（如3001），需检查代理规则是否正确指向后端3000端口。

2. 补全CORS配置（避免隐性跨域问题） #

当前代码未显式配置CORS，即使同域运行也可能存在隐性限制。安装cors包并全局启用：

npm install cors

修改server.js：

const cors = require('cors');
// 全局启用CORS，允许所有来源
app.use(cors());

// 或针对/api/reviews接口单独配置
app.get('/api/reviews', cors(), async (req, res) => {
  // 原有逻辑...
});

3. 检查后端响应完整性 #

在res.json()前打印序列化后的完整数据，确认无格式错误：

console.log('待返回数据:', JSON.stringify(reviews));
res.json(reviews);

同时在前端开发者工具Network面板，查看/api/reviews请求的Response和Preview标签，确认是否有数据返回、是否存在错误状态码（如404/500）。

4. 完善前端错误捕获逻辑 #

确保前端请求覆盖所有错误场景（网络错误、状态码错误）：

Axios示例

axios.get('/api/reviews')
  .then(res => console.log('前端接收数据:', res.data))
  .catch(err => {
    if (err.response) {
      console.error('后端返回错误:', err.response.status, err.response.data);
    } else if (err.request) {
      console.error('无响应返回:', err.request);
    } else {
      console.error('请求配置错误:', err.message);
    }
  });

Fetch示例

fetch('/api/reviews')
  .then(res => {
    if (!res.ok) throw new Error(`HTTP错误: ${res.status}`);
    return res.json();
  })
  .then(data => console.log(data))
  .catch(err => console.error(err));

5. 排查中间件拦截问题 #

确认server.js中无其他中间件（如body-parser、静态文件中间件）在/api/reviews接口前拦截响应，导致res.json()未执行。

6. 直接测试接口可用性 #

在浏览器或Postman中直接访问http://localhost:3000/api/reviews：

• 若能获取JSON数据：问题出在前端请求逻辑
• 若无法获取：回到后端排查接口执行流程

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