PERN应用启动即报JSON语法错误，求助排查问题根源

这是一个PERN应用，我从没碰到过这个错误，谷歌搜了也没找到相关记录。检查了index.html文件，没发现异常，代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

但启动应用时立刻报错：SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

错误根源 #

这个错误的核心是你的代码里有某个逻辑在尝试把HTML内容当成JSON解析，常见场景包括：

1. 后端接口返回HTML而非JSON：前端请求后端API时，后端路由未匹配（比如404）、服务未启动，或者后端抛出错误时返回了HTML格式的错误页面，但前端用res.json()（Axios）或response.json()（Fetch）这类方法去解析响应，导致把HTML当成JSON解析失败。

2. React代理配置问题：如果你的React项目通过package.json里的proxy字段配置了后端代理，但后端服务没启动，或者代理指向的路由不存在，请求会被转发到React开发服务器，返回index.html，前端解析成JSON就会报错。

3. 前端请求地址错误：比如前端请求了/api/data，但后端没有这个路由，后端服务器返回了默认的HTML错误页，而非预期的JSON数据。

排查步骤 #

• 先确认后端服务是否正常运行，直接用Postman或浏览器访问后端接口，看是否返回正确的JSON格式数据。
• 打开浏览器控制台的Network标签，找到报错时的请求，查看响应内容是不是HTML（比如index.html或者后端的错误页）。
• 检查前端的API请求代码，确认请求地址和后端路由完全匹配，没有拼写错误。
• 如果用了React代理，确保proxy字段指向的后端服务端口正确，且后端服务正在运行。

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