failed to fetch报错：先看Network再改代码

页面打开一片空白，控制台一行红字 TypeError: failed to fetch，接口数据一条没回来。新人第一反应是后端挂了，其实这个报错多数时候连响应都没拿到，问题可能在前端、网络或者跨域配置上。

它和 4xx、5xx 不是一回事

fetch 只要服务器返回了响应，哪怕状态码是 500，Promise 也会正常 resolve，不会抛 failed to fetch。抛这个 TypeError，说明请求在浏览器这一层就失败了：域名解析不了、连接被拒、证书不对、被 CORS 拦下，或者中途断网。

打开 Network 面板看三样

F12 切到 Network，刷新页面找到那条红色请求。先看 Status 列，常见 net::ERR_CONNECTION_REFUSED、net::ERR_NAME_NOT_RESOLVED、net::ERR_CERT_AUTHORITY_INVALID；再看 Request URL 是不是写错端口或协议；再看 Console 有没有 CORS 相关提示，有的话问题多半在服务端的响应头。

几个高频原因

https 页面请求 http 接口，被当成混合内容拦掉；本地开发端口写错，后端根本没启动；跨域请求带了自定义头，预检 OPTIONS 返回 403；浏览器插件拦截了请求；上传大文件超过网关超时时间。还有一种，代码里 AbortController 主动取消请求，也会报 failed to fetch。本地开发时先确认 dev server 真的监听了那个端口，端口被占用的情况不少见。

怎么快速定位

把请求地址复制出来，终端里 curl 一下：能通，问题在浏览器侧，重点查 CORS 和 https；不通，问题在网络或服务端。服务端放行跨域时，记得同时处理 OPTIONS 预检，并带上 Access-Control-Allow-Origin 等响应头。

判断：先看 Network 里的具体错误码，再决定改前端还是找后端。只盯着这行红字改代码，多半白忙。先复现一次，比猜十次快。