React调用Express接口fetch报JSON解析错误，其他工具访问正常

问题原因排查&解决方案 #

SyntaxError: Unexpected token < in JSON at position 0 错误本质是你尝试将非JSON格式的内容解析为JSON，绝大多数场景下返回的内容是HTML格式的错误页面，开头字符为<所以触发该报错。可以按以下顺序排查修复：

1. 最高概率问题：fetch请求缺少HTTP协议前缀 #

你当前的fetch URL写的是 192.168.88.169:8080/api/CB/fridge01，没有加http://前缀，浏览器会将其识别为相对路径，自动拼接你React服务的域名前缀，比如你的React开发服务跑在localhost:3000，实际发起请求的地址会变成http://localhost:3000/192.168.88.169:8080/api/CB/fridge01，React开发服务找不到对应路由就会返回默认的404 HTML页面，解析该内容就会触发报错。
直接修改fetch的URL为完整地址即可：

fetch("http://192.168.88.169:8080/api/CB/fridge01", { method: "GET" })

2. 次高频问题：跨域配置缺失 #

如果加了协议前缀还是报错，打开浏览器开发者工具的「网络」面板，查看该请求的状态码，如果是跨域错误，需要在Express服务中配置CORS：

• 首先安装cors依赖：npm install cors
• 在Express的index.js中注册cors中间件，注意要放在路由注册之前：

const cors = require('cors')
// 放在app.use("/api", router)之前
app.use(cors())

3. 临时调试方案 #

如果还是无法定位问题，可以先打印原始响应内容确认返回结果：

componentDidMount() {
  fetch("http://192.168.88.169:8080/api/CB/fridge01", { method: "GET" })
    .then(async (res) => {
      // 先打印状态码和原始响应文本
      console.log('响应状态：', res.status)
      const rawContent = await res.text()
      console.log('原始响应内容：', rawContent)
      // 确认是JSON再做解析
      try {
        const json = JSON.parse(rawContent)
        this.setState({ metrics: json })
      } catch (err) {
        console.error('解析失败，返回内容不是JSON：', err)
      }
    })
    .catch((err) => console.log('请求发起失败：', err));
}

额外优化点 #

你的Express根路由重定向也缺少HTTP协议前缀，修改后访问根路径会更稳定：

app.get("/", (req, res) => {
  res.redirect("http://localhost:" + port + "/api/CB/fridge01");
});

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