React+Node.js项目fetch报TypeError: Failed to fetch如何解决

核心报错原因 #

TypeError: Failed to fetch 不是前端React代码逻辑错误，本质是浏览器根本没能成功拿到接口响应，结合你贴的代码，90%以上是以下几个问题导致的：

• 请求地址配置错误：你的代码里请求写的是https://localhost:3000/api/user/login，create-react-app启动的前端开发服务默认就占用3000端口，后端服务不可能同时在同一个端口跑https接口；本地开发绝大多数场景不会配置SSL证书，强行用https协议会触发浏览器证书安全拦截，直接终止请求。
• 跨域（CORS）拦截：前后端服务端口不一致（比如前端跑3000，后端跑4000/5000）时，后端没配置跨域响应头，浏览器同源策略会拦截返回结果，对外抛这个错误。
• 后端服务未正常启动：Node.js后端没跑起来，或者监听的端口和你写的请求端口不一致，请求根本发不到后端。
• 浏览器插件拦截：广告拦截、隐私防护类插件把登录类接口直接拦截，请求没有正常发出。

分步修复方案 #

按优先级从高到低排查，基本能解决问题：

1. 先修正请求地址、确认后端状态 #

• 先启动你的Node.js后端服务，确认后端实际监听的端口号（比如常见的4000、5000、8080），不要和前端的3000端口混淆。
• 本地开发没配置可信SSL证书的情况下，把请求里的https改成http，先测通接口再考虑https配置。如果后端跑在4000端口，临时测试可以先把地址改成http://localhost:4000/api/user/login。
• 打开浏览器F12的Network面板，点击登录按钮看请求状态：如果提示NET::ERR_CERT_AUTHORITY_INVALID就是证书问题，换回http即可；如果提示ERR_CONNECTION_REFUSED就是后端没启动或者端口写错。

2. 后端配置跨域允许 #

如果前后端端口不一致，必须在Node.js后端配置跨域头，否则浏览器会拦截响应：

• 如果用Express框架，直接安装cors中间件：

  npm install cors
  

  在后端入口文件加入配置，开发环境可以直接放开所有跨域请求：

  const express = require('express');
  const cors = require('cors');
  const app = express();
  
  // 解析JSON请求体，没加这个配置后端也读不到传的账号密码
  app.use(express.json());
  // 放开跨域
  app.use(cors());
  
  // 后面再写你的登录接口路由
  app.post('/api/user/login', (req, res) => {
    // 登录逻辑
  })
  

• 注意：带Content-Type: application/json的POST请求会触发浏览器OPTIONS预检，后端必须正常响应OPTIONS请求，cors中间件会自动处理这部分逻辑，不用额外手写。

3. （推荐）前端配置开发代理，彻底避免跨域问题 #

如果是create-react-app搭建的项目，不用在前端写死后端全路径，直接在项目根目录的package.json里加一行代理配置：

{
  "name": "your-project-name",
  "version": "0.1.0",
  "proxy": "http://localhost:你后端实际的端口号",
  // 其他原有配置不变
}

然后把前端fetch的地址改成相对路径，去掉域名和端口部分：

const response = await fetch(`/api/user/login`, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    email: credentials.email,
    password: credentials.password,
  }),
});

改完之后重启React开发服务，所有/api开头的请求会自动转发到你的后端服务，不会触发跨域问题，生产环境部署时只要把前后端放在同一个域名下，也不用改代码。

4. 排查插件拦截 #

如果以上配置都没问题还是报错，打开浏览器无痕模式（默认不加载第三方插件）访问页面重试，如果无痕模式下正常，就是浏览器的广告拦截、隐私防护插件拦截了接口，把本地开发地址加入插件白名单即可。

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