React调用Express后端接口返回HTML而非JSON的报错求助

调用Express后端接口获取数据时触发错误：

SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON"

网络面板显示响应为HTML文档，但直接访问localhost:5001/test能获取正确JSON响应，页面无内容显示。相关代码如下：

Express服务器代码 #

const express = require("express");
const app = express();
app.use(express.json());
const cors = require("cors");
app.use(cors());

app.get("/test", async (req, res) => {
  try {
    const data = {
      isActive: true,
      count: 10,
      message: "Hello, world!",
    };

    console.log(data); // Log the data being sent

    res.json({ username: "Flavio", ...data });
  } catch (err) {
    res.send({ error: "not found" });
  }
});

React组件代码 #

import React, { useState, useEffect } from "react";

export default function GetData() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("/test")
      .then((res) => res.json())
      .then((data) => setData(data))
      .catch((error) => {
        console.error("Error fetching data:", error);
      });
  }, []);

  if (data === null) {
    return <Loading />;
  }

  return (
    <div>
      <h2>Data Received:</h2>
      <p>isActive: {data.isActive.toString()}</p>
      <p>Count: {data.count}</p>
      <p>Message: {data.message}</p>
      <p>Username: {data.username}</p>
    </div>
  );
}

解决方案 #

1. 修正React请求路径 #

React中fetch("/test")是相对当前应用域名的路径，会请求React服务器（通常是3000端口）的/test，而非Express的5001端口。有两种解决方式：

• 直接使用完整后端地址：
  修改fetch请求为：

  fetch("http://localhost:5001/test")
  

• 配置React代理（推荐）：
  在React项目的package.json中添加代理配置：

  "proxy": "http://localhost:5001"
  

  配置后，相对路径的请求会自动转发到Express服务器，无需修改fetch代码，重启React应用即可生效。

2. 确保Express服务器正确监听端口 #

现有Express代码缺少端口监听逻辑，添加以下代码启动服务器：

const PORT = 5001;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

3. 修复Loading组件缺失问题 #

React代码中使用了<Loading />但未导入该组件，会导致渲染报错。可以替换为简单的加载提示：

if (data === null) {
  return <div>加载中...</div>;
}

或者导入已定义的Loading组件。

验证步骤 #

1. 启动Express服务器，确认控制台打印Server running on port 5001
2. 配置代理或修改fetch地址后，重启React应用
3. 查看浏览器网络面板，确认接口响应为JSON格式
4. 页面应正常渲染获取到的数据

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