前端调接口，控制台一片红：TypeError: Failed to fetch。后端同学查了日志说没收到请求，两边对着截图互相怀疑。

这句是 fetch 的笼统网络层失败，浏览器故意不给细节。要么请求根本没发出去，要么被浏览器自己拦了，服务端确实可能一无所知。

先去 Network 面板

Console 只有一句话，Network 里才有真相：请求发出去没有、状态码是 failed 还是 CORS error、有没有 OPTIONS 预检。预检失败时，真正的请求压根不会发出，后端当然没有日志。

最常见的四种

  • CORS：响应缺 Access-Control-Allow-Origin，或者带 cookie 时用了星号，预检不通过
  • 混合内容：HTTPS 页面请求 http 接口，被浏览器直接拦掉
  • 插件和 CSP：广告拦截插件拦了域名，或者 connect-src 没放行
  • 证书：自签名证书不被信任，连接在握手阶段就断了

本地开发用代理绕开跨域：vite 配 server.proxy，把 /api 转到后端，浏览器看来是同源，连预检都不会触发。

被主动取消也会报这一句

AbortController 主动 abort 也报 Failed to fetch，别当成网络故障。页面切换、重复请求取消都会走到这里，加个判断把取消和失败分开处理。

后端返回 502 且响应体为空时，某些浏览器版本也归到这一类，这时候看网关日志比看前端有用。

排查顺序：看 Network 有没有请求、看响应头、看是否 https、最后才怀疑网络。只盯 Console 那一行，容易查偏半天。