fetch报错90%集中于路径、状态码处理、响应体读取和请求头四环节：1.“Failed to fetch”属网络层问题；2.“404”为服务端资源缺失；3.“TypeError”多因响应体重复读取或漏await；4.“Unexpected token”系数据格式与解析方式不匹配。
遇到 fetch 报错别急着翻文档，先看错误类型和上下文——90% 的问题集中在路径、状态码处理、响应体读取和请求头这四个环节。
一、“Failed to fetch”：网络层或基础配置问题
这不是 HTTP 错误，而是 fetch 根本没发出去或连接失败。常见原因：
-
URL 路径写错：用相对路径如
api/users时，浏览器会拼成当前页面 URL + 该路径（比如http://localhost:3000/dashboard/api/users），应改用绝对路径/api/users；本地 JSON 文件记得加./input.json -
CORS 被拦截：控制台显示 “CORS policy blocked…”？说明请求发出了但被浏览器拦下，需后端配置
Access-Control-Allow-Origin，前端无法绕过 -
跨域请求没带凭据：若需 cookie 或认证头，必须显式加
credentials: 'include'，否则默认不发送 - HTTPS 页面请求 HTTP 接口：现代浏览器直接拒绝混合内容，确保协议一致
二、“404 Not Found”：服务端找不到资源
请求发出去了，服务器明确说“没这个地址”。排查重点：
- 检查 Network 面板里实际发出的请求 URL，和你代码写的是否完全一致（注意大小写、斜杠、版本号，如
/api/v2/usersvs/api/v1/users） - 确认后端 API 路由已正确定义并启动（尤其 Next.js 中 API 文件是否放在
app/api/...或pages/api/...正确位置） - 构建工具（如 Vite、Webpack）是否把静态资源输出到了预期目录？
fetch('./data.json')要求该文件在最终dist目录下存在
三、“TypeError: Failed to fetch” 或 “Body has already been used”
前者常因网络中断、DNS 失败或 AbortSignal 触发；后者是 fetch 最典型的逻辑错误：
-
响应体只能读一次：调用过
response.json()后再调response.text()就会报错。需要复用时，提前用response.clone()复制一份 -
漏掉 await：写成
const data = response.json()（没 await）→ 得到的是 Promise，不是数据；后续操作就可能出 undefined 或类型错误 -
没处理非 2xx 状态码：fetch 默认不因 400/500 拒绝 Promise，要手动判断：
if (!response.ok) throw new Error(...)
四、“Unexpected token” 或解析失败：数据格式与解析方式不匹配
典型场景：后端返回纯文本或 HTML，你却写了 response.json()。
- 先看响应的
Content-Type头（Network → Headers → Response Headers），是application/json才能用.json()；是text/plain就用.text() - 上传文件用
FormData时，不要手动设Content-Type—— 浏览器会自动加multipart/form-data; boundary=xxx；但后续 JSON 请求必须显式写'Content-Type': 'application/json' - 后端返回 JSON 却没设对 header？可在代码里加容错：
try { return await res.json(); } catch { return await res.text(); }
