fetch GET 请求需检查 response.ok 并手动解析响应体，POST 需设置 Content-Type 且 body 要 JSON.stringify；axios 默认处理错误状态码和自动序列化，fetch 需手动处理；跨域需确认后端 CORS 配置，尤其带 credentials 时 Access-Control-Allow-Origin 不能为通配符。
fetch 基本用法：GET 请求怎么写才不报错？fetch 默认只发 GET，但容易忽略两点：一是它**不会自动抛出 HTTP 错误状态码（如 404、500）**，二是**响应体需要手动解析**。直接 await fetch(url) 返回的是 Response 对象，不是 JSON 数据。
- 必须显式调用
response.json() 或 response.text() 才能读取内容
- 要检查
response.ok（即 status 在 200–299 之间），否则错误响应会静默通过
- 不带选项时，
fetch 不发送 cookies，需加 { credentials: 'include' } 才能传 session
response.json() 或 response.text() 才能读取内容 response.ok（即 status 在 200–299 之间），否则错误响应会静默通过 fetch 不发送 cookies，需加 { credentials: 'include' } 才能传 session 示例：
fetch('/api/users')
.then(res => {
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.json();
})
.then(data => console.log(data))
.catch(err => console.error(err));POST 请求怎么传 JSON 数据？
发 POST 时，常见错误是漏掉 Content-Type 头或没序列化 body：
-
body 必须是字符串，所以要用 JSON.stringify(data)
- 必须设置
headers: { 'Content-Type': 'application/json' }，否则后端可能收不到或解析失败
- 如果后端用 form-data，就不能用 JSON，得改用
FormData 实例
body 必须是字符串，所以要用 JSON.stringify(data) headers: { 'Content-Type': 'application/json' }，否则后端可能收不到或解析失败 FormData 实例 示例：
fetch('/api/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email: 'a@b.c', password: '123' })
});axios 和 fetch 的关键区别在哪？axios 是第三方库，fetch 是浏览器原生 API。它们行为差异直接影响调试体验：
-
axios 默认把 4xx/5xx 状态码转为 rejected Promise，fetch 不会
-
axios 自动序列化 JS 对象为 JSON（如果 Content-Type 是 application/json），fetch 需手动 JSON.stringify
-
axios 支持请求/响应拦截器，适合统一加 token、处理错误；fetch 得靠封装函数模拟
-
axios 在 IE11 中需要 polyfill，fetch 同样需要（但 axios 内置了更平滑的降级逻辑）
axios 默认把 4xx/5xx 状态码转为 rejected Promise，fetch 不会 axios 自动序列化 JS 对象为 JSON（如果 Content-Type 是 application/json），fetch 需手动 JSON.stringify axios 支持请求/响应拦截器，适合统一加 token、处理错误；fetch 得靠封装函数模拟 axios 在 IE11 中需要 polyfill，fetch 同样需要（但 axios 内置了更平滑的降级逻辑） 简单封装一个带错误处理的 fetch 函数比引入 axios 更轻量，但项目中已有 axios 就别重复造轮子。
跨域请求失败时该看哪几处？
CORS 报错（如 No 'Access-Control-Allow-Origin' header）不是前端代码问题，但前端要确认三件事：
- 请求 URL 是否确实跨域（协议、域名、端口任一不同即跨域）
- 前端是否在
fetch 中加了 mode: 'cors'（默认就是，一般不用显式写）
- 如果带认证信息（cookies 或 Authorization header），后端必须返回
Access-Control-Allow-Credentials: true，且 Access-Control-Allow-Origin *不能是通配符
fetch 中加了 mode: 'cors'（默认就是，一般不用显式写） Access-Control-Allow-Credentials: true，且 Access-Control-Allow-Origin *不能是通配符 开发时后端未配 CORS，最快速验证方式是临时用代理（如 vite 的 server.proxy 或 webpack devServer 的 proxy），而不是关浏览器安全策略。
立即学习“Java免费学习笔记（深入）”；
真正难调的往往不是语法，而是后端返回的 status code 没被检查，或者 cookie 设置了 SameSite=Strict 却在跨站场景下使用。
