React项目调用本地NodeJS后端API时报Failed To Fetch错误如何解决

常见触发原因 #

• 后端服务未正常运行：你请求的http://localhost:8080/bitcoin对应的NodeJS后端没有启动，或是后端实际监听的端口不是8080
• 跨域策略拦截：React前端默认运行端口为3000/5173等，和后端8080端口不一致，浏览器同源策略直接拦截了跨端口请求
• 接口配置错误：后端没有定义/bitcoin路径的接口，或是接口要求的请求方法和fetch默认的GET方法不匹配
• 本地拦截规则限制：部分广告拦截、隐私类浏览器扩展，或是本地防火墙会阻止跨端口的本地请求
• 缺少错误捕获逻辑：你当前的代码只处理了请求成功的回调，没有异常捕获逻辑，所以会抛出未捕获的Promise报错

分步排查解决方法 #

1. 优先验证后端可用性
   直接在浏览器地址栏输入http://localhost:8080/bitcoin，确认能否正常返回JSON数据。如果打不开，先启动后端服务，核对监听端口、接口路径是否和请求地址一致。
2. 处理跨域问题
   跨域是前端新手对接本地后端最常遇到的问题，有两种快速解决方式：

• 后端配置CORS：如果后端用的是Express框架，直接安装cors中间件，在服务代码中添加配置即可：

const cors = require('cors')
app.use(cors())

• 开发环境用React代理：如果是Vite创建的项目，在vite.config.js中添加server.proxy配置；如果是CRA创建的项目，在package.json中新增字段"proxy": "http://localhost:8080"，之后请求时直接写fetch('/bitcoin')即可，不需要写全域名和端口。

3. 补全请求错误捕获逻辑
   修改你的fetch代码，添加异常捕获逻辑，方便定位具体错误原因：

function App() {
  return <div className='app'>
    <button onClick={() => {
      fetch('http://localhost:8080/bitcoin')
        .then((res) => {
          if (!res.ok) throw new Error(`接口响应异常，状态码：${res.status}`)
          return res.json()
        })
        .then(console.log)
        .catch(err => console.error('请求失败详情：', err))
    }}>Display Data
    </button>
  </div>
}

4. 排查本地拦截规则
   可以暂时禁用浏览器的广告拦截、隐私类扩展，用无痕模式打开页面测试，同时检查本地防火墙是否限制了8080端口的访问。

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