React调用Node+MSSql课程API时出现JSON.parse解析错误

项目背景 #

我开发的网站采用React前端、Node后端搭配Microsoft SQL Server数据库，用jsonwebtoken实现登录会话。现在需要获取学生选课的课程数组，Postman测试API正常，但React端调用时一直报JSON.parse错误。

后端核心代码 #

数据库查询方法 #

/*
Get array of school courses
*/
courseGetAll = async () => {
  try {
    // Connect to database
    const pool = await sql.connect(config),
      //Query
      query = "SELECT * FROM Courses",
      result = await pool.request().query(query);
    pool.close();
    // console.log(result);
    // console.log(result.recordsets[0]);
    return result.recordsets[0];
  } catch (error) {
    console.log(error);
  }
};

API路由实现 #

const courseGetAll = async (req, res) => {
    dbo.courseGetAll()
      .then((data) => {
        res.status(200).json(data);
      })
      .catch((e) => {
        console.log(e);
        res.status(400).json({ err: e.message });
      });
  },

Postman测试结果 #

API能正常返回结构化的课程数组：

[
    {
        "CourseID": 1,
        "CourseName": "Project Management 1",
        "CourseCode": "PRO111",
        "CourseTerm": 1
    },
    {
        "CourseID": 2,
        "CourseName": "C++ Programming Fundamentals",
        "CourseCode": "CPP111",
        "CourseTerm": 1
    },
    // ... 其余课程数据省略
]

React前端调用代码 #

// on client/src/pages/student/pages/AddCourses.js
const [courses, setCourses] = useState(null),
user = useAuthContext().user;
useEffect(() => {
    const courseList = async () => {
        try {
            const response = await fetch("/api/course/all", {
              method: "GET",
              headers: { Authorization: `Bearer ${user.token}` },
            })
            if (response.ok) {
              const coursesNew = await response.json();
              if (coursesNew) {
                 setCourses(coursesNew);
                 console.log(courses);
              }
            } else {
              // 处理非200状态码的响应
              const errorText = await response.text();
              console.error("API返回错误:", errorText);
            }
          } catch (err) {
            console.log("Error: " + err.message);
          }
        };
        if (user) {
          courseList();
        }
      }, [user]);

问题分析与解决步骤 #

1. 修复前端语法错误 #

你的React代码里缺少try关键字，这会导致代码执行异常，进而引发后续的JSON解析错误。先补上try包裹fetch逻辑，这是最基础的修复。

2. 排查API响应有效性 #

虽然Postman测试正常，但React端请求可能因为以下原因返回非JSON内容：

• Token无效/过期，后端返回HTML错误页面而非JSON
• 跨域配置问题，返回跨域错误提示文本
• 后端courseGetAll方法的catch块仅打印错误，未抛出异常，导致API的then接收到undefined，res.json(undefined)可能返回无效内容

对应修复：

• 完善后端错误抛出逻辑：

courseGetAll = async () => {
  try {
    // ... 原有代码
  } catch (error) {
    console.log(error);
    throw error; // 抛出错误，让API的catch块捕获并返回JSON错误
  }
};

• 在React端捕获非200响应的实际内容：

if (!response.ok) {
  const errorContent = await response.text();
  console.error("API响应错误内容:", errorContent);
  return;
}

• 验证Token有效性：打印user.token，确认和Postman中使用的有效Token一致。

3. 修正状态更新的调试误区 #

setCourses是异步操作，调用后立即console.log(courses)无法获取最新值，这属于正常现象，和JSON错误无关。可改为打印coursesNew，或用额外useEffect监听courses变化：

useEffect(() => {
  console.log("更新后的课程数据:", courses);
}, [courses]);

总结 #

优先修复前端try缺失的语法错误，再通过打印响应文本排查实际返回内容，同时完善后端错误抛出逻辑，确保无论成功失败都返回有效JSON。

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