运行React应用报SyntaxError: Unexpected token <错误如何解决？

该错误的核心是fetch请求返回的响应内容不是合法JSON格式，而是以<开头的HTML文本，通常是后端返回的404、500错误页，或是代理配置错误、SPA fallback返回的前端页面内容，调用result.json()解析HTML内容时就会触发该语法错误。

• 打开浏览器控制台「网络」面板，找到对应的/api/foodies/${name}请求，查看响应状态码和返回内容：
  • 状态码为404：检查接口路径拼写是否正确，后端对应路由是否存在
  • 状态码为500：后端服务内部运行错误，需排查后端接口逻辑
  • 状态码为200但返回内容是HTML：本地开发代理配置错误，请求没有被转发到后端服务，反而返回了React应用的index.html
• 检查依赖项name的值，确认没有空值、特殊字符、空格等导致路由拼接错误的内容

首先给请求加状态校验和异常捕获，避免未处理的Promise报错，修改后的代码如下：

useEffect(() => {
    const fetchData = async () => {
      try {
        // 过滤无效参数，避免发起错误请求
        if (!name?.trim()) return
        const result = await fetch(`/api/foodies/${name}`);
        // 先校验响应状态是否正常
        if (!result.ok) {
          throw new Error(`请求失败，状态码：${result.status}`)
        }
        // 调试阶段可先打印原始响应内容确认格式，调试完成后可删除
        // const rawText = await result.text()
        // console.log('接口返回原始内容：', rawText)
        // const body = JSON.parse(rawText)
        const body = await result.json();
        console.log(body);
        setFoodieInfo(body);
      } catch (err) {
        // 统一捕获请求、解析阶段的所有错误
        console.error('获取信息失败：', err)
      }
    };
    fetchData();
  }, [name]);

• 若为代理配置错误：检查项目代理规则（create-react-app项目可检查package.json的proxy字段，或是自定义的代理配置文件），确保/api前缀的请求正确转发到后端服务地址
• 若为后端路由错误：修正后端路由规则，确保/api/foodies/${name}接口存在，且返回标准JSON格式响应

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