MERN栈应用报错：SyntaxError: JSON.parse解析异常求助

问题分析 #

你遇到的SyntaxError: JSON.parse: unexpected character at line 1 column 1错误，核心原因是前端尝试解析的内容并非合法JSON——尽管你确认后端返回了合法JSON，但实际前端请求到的响应可能并非预期的后端数据。结合你提供的response信息（请求地址指向前端端口5173），大概率是代理配置、请求路径或响应内容存在异常。

排查与解决步骤 #

1. 配置前端代理，确保请求转发到后端 #

前端开发时，直接请求/api/workouts会默认发送到前端服务（localhost:5173），而非后端服务。需要配置代理将/api开头的请求转发到后端端口（比如常见的5000）：

• Vite项目：在vite.config.js中添加代理配置：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:5000', // 替换为你的后端服务地址
        changeOrigin: true
      }
    }
  }
});

• Create React App项目：在package.json中添加proxy字段：

{
  "name": "your-app",
  "proxy": "http://localhost:5000",
  // ...其他配置项
}

配置完成后重启前端服务，确保请求正确转发到后端。

2. 验证实际响应内容 #

直接打印响应的原始文本，确认前端拿到的是不是预期的JSON：
修改前端代码中的fetchWorkouts函数：

const fetchWorkouts = async () => {
  const response = await fetch("/api/workouts");
  const rawText = await response.text();
  console.log('实际响应内容:', rawText); // 查看真实返回的内容
  try {
    const json = JSON.parse(rawText);
    if (response.ok) {
      setWorkouts(json);
    }
  } catch (err) {
    console.error('解析失败:', err);
  }
};

如果打印出HTML（比如前端的404页面），说明请求未到达后端；如果是带多余字符的JSON，可能是后端返回时包含了UTF-8 BOM（字节顺序标记）或额外空白，需要后端调整输出逻辑。

3. 检查后端响应设置 #

确保后端正确返回JSON并设置响应头：

• 使用Express的res.json()方法返回数据，它会自动处理JSON序列化并设置Content-Type: application/json：

app.get('/api/workouts', async (req, res) => {
  const workouts = await Workout.find();
  res.json(workouts); // 自动配置正确的响应格式
});

• 避免使用res.send()返回JSON（除非手动设置Content-Type），否则可能因响应头不正确引发解析问题。

4. 确认后端路由路径匹配 #

检查后端的路由是否和前端请求的/api/workouts完全一致，比如后端是否写的是app.get('/api/workouts', ...)，而非/workouts或其他路径。

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