Express受保护路由Postman正常但React前端请求出现JSON解析错误

错误根因 #

• 核心原因：后端/me接口返回的是纯文本字符串，但前端代码强制调用res.json()将响应内容按JSON格式解析，字符串首字符为A，不符合JSON语法，因此抛出SyntaxError: Unexpected token A in JSON at position 0错误。
• Postman调用正常是因为Postman会根据响应头自动适配展示格式，不会强制解析内容为JSON，因此能正常展示文本内容。
• 潜在补充原因：如果JWT校验失败，express-jwt中间件默认返回的错误信息也是纯文本格式，同样会导致前端JSON解析失败。

修复方案 #

方案1（推荐：规范接口格式） #

修改后端控制器，统一返回JSON格式响应，和前端解析逻辑匹配：

// 修改受保护路由控制器代码
export function profile(req, res) {
  res.status(200).json({
    message: 'A secret resource - only for authenticated users'
  });
}

同时新增Express全局错误处理中间件，统一所有异常返回为JSON格式，避免JWT校验失败等场景也出现解析错误，在index.js中app.use(routes)之后添加如下代码：

// 全局错误处理中间件
app.use((err, req, res, next) => {
  // 处理JWT校验错误
  if (err.name === 'UnauthorizedError') {
    return res.status(401).json({ error: '身份验证失败，请重新登录' })
  }
  // 其他通用错误处理
  res.status(err.status || 500).json({
    error: err.message || '服务器内部错误'
  })
})

方案2（适配纯文本响应） #

如果不需要结构化返回，直接修改前端代码，将JSON解析改为文本解析即可：

// 修改前端fetch逻辑
.then((res) => res.text())

可选优化 #

前端GET请求不需要携带Content-Type: application/json请求头，该请求头用于声明请求体格式，GET请求无请求体，可直接删除该配置，不影响功能。

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