React+MySQL(XAMPP)商品数据及图片前端展示故障求助

核心问题定位 #

前端报错SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON"明确说明：后端/api/products接口返回的不是预期的JSON数据，而是HTML内容（通常是404错误页面），导致JSON解析失败。后端无日志输出则说明请求根本没到达/api/products的处理路由。

后端排查步骤 #

1. 验证路由配置正确性 #

• 检查server.js中/api/products路由的定义，确保是app.get('/api/products', ...)格式，无拼写错误（比如漏写s、路径误写为/product）。
• 确认路由代码未被注释，且在app.listen()语句之前定义（Express路由按顺序匹配，晚于listen的路由不会生效）。
• 排查是否有前置中间件（如身份验证、CORS）拦截了请求，导致请求未进入接口处理逻辑。

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

在浏览器或Postman中访问http://localhost:[你的后端端口]/api/products：

• 若返回HTML页面（如404），说明路由未正确注册，或后端服务未运行在预期端口。
• 若返回JSON数据，再转向前端请求URL的正确性排查。

3. 修复接口响应逻辑 #

• 在接口处理函数开头添加日志（如console.log('Received products request')），确认请求是否到达。若无日志输出，回到路由配置排查。
• 核对数据库字段名：你的表字段是img1/img2，而非代码中提到的Images，避免因字段名不匹配导致数据异常。
• 确保用res.json()返回数据，禁止使用res.send()或res.render()（后者会返回HTML），示例代码：

db.query('SELECT * FROM Products', (err, results) => {
  if (err) {
    console.error(err);
    return res.status(500).json({ error: 'Database query failed' });
  }
  // 直接返回查询结果，无需额外解析图片字段（存储的是文件名）
  res.json(results);
});

4. 确认静态资源路由配置 #

确保uploads文件夹的静态访问路由正确，示例：

const path = require('path');
app.use('/uploads', express.static(path.join(__dirname, 'uploads')));

前端排查步骤 #

1. 修正请求URL #

确保请求的完整URL正确，若前后端端口不同，必须指定后端端口：

// 错误示例：未指定端口，可能请求到前端所在服务器
fetch('/api/products')
// 正确示例（后端运行在3001端口）
fetch('http://localhost:3001/api/products')

2. 规范响应处理流程 #

先检查响应状态再解析JSON，避免直接解析HTML导致语法错误：

fetch('http://localhost:3001/api/products')
  .then(res => {
    if (!res.ok) throw new Error(`HTTP错误：${res.status}`);
    return res.json();
  })
  .then(data => {
    // 渲染商品列表逻辑
  })
  .catch(err => console.error('获取商品数据失败：', err));

3. 正确拼接图片路径 #

用返回的img1/img2文件名拼接静态资源URL：

// 示例：渲染商品图片
<img src={`http://localhost:3001/uploads/${product.img1}`} alt={product.name} />

常见坑点 #

• 路由顺序错误：若express.static路由放在API路由之后，且API路径拼写错误，会导致请求被静态资源路由处理，返回404 HTML。
• CORS未配置：前后端端口不同时，后端未配置cors中间件，浏览器会拦截请求，可能返回错误页面。
• 后端服务未启动：或启动在错误端口，请求落到了XAMPP的Apache服务器，返回HTML页面。

内容的提问来源于stack exchange，提问作者Amit Bin Tariqul