正确发起GET请求需用URLSearchParams构造参数、检查response.ok并显式调用response.json()；POST提交JSON须设Content-Type头且body用JSON.stringify()；CORS是浏览器同源策略限制，需后端配置或本地代理解决；封装请求函数应统一base URL、headers和错误处理，避免过早抽象。
JavaScript 与后端 API 通信，核心就是用 fetch 或 XMLHttpRequest 发起 HTTP 请求；现代项目基本只用 fetch，但得处理好 Promise 链、错误边界和跨域限制。
如何用 fetch 正确发起 GET 请求
GET 请求看似简单，但容易漏掉响应体解析和网络错误捕获。浏览器中 fetch 成功只表示请求已发出（哪怕后端返回 500），不等于业务成功。
- 必须显式调用
response.json()（或response.text()）才能读取响应体，否则只是个流对象 - 4xx/5xx 状态码不会触发
catch，需手动检查response.ok - URL 中的查询参数建议用
URLSearchParams构造，避免拼接出错
const params = new URLSearchParams({ id: 123, lang: 'zh' });
fetch(`/api/user?${params}`)
.then(r => {
if (!r.ok) throw new Error(`HTTP ${r.status}`);
return r.json();
})
.then(data => console.log(data))
.catch(err => console.error('请求失败:', err));
POST 提交 JSON 数据时要注意什么
后端通常期望 Content-Type: application/json，但 fetch 默认不设这个 header，且 body 必须是字符串。
-
body字段必须是字符串，不能直接传对象，要用JSON.stringify() - 务必手动设置
headers: { 'Content-Type': 'application/json' } - 如果后端用 form 表单接收（如 Express 的
urlencoded中间件），则应改用FormData或调整 header 和 body 格式
fetch('/api/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email: 'a@b.c', password: '123' })
});
为什么本地开发时经常遇到 CORS 错误
CORS 是浏览器强制的同源策略，不是代码写错了，而是服务端没允许当前域名访问。常见表现是控制台报 Access to fetch at ... from origin ... has been blocked by CORS policy。
JSON入门指南 中文WORD版
下载
JSON 即 JavaScript Object Natation，它是一种轻量级的数据交换格式，非常适合于服务器与 JavaScript 的交互。本文将快速讲解 JSON 格式，并通过代码示例演示如何分别在客户端和服务器端进行 JSON 格式数据的处理。
立即学习“Java免费学习笔记（深入）”；
-
前端无法绕过 CORS —— 这是浏览器行为，
fetch或axios都一样 - 开发阶段可让后端在响应头加
Access-Control-Allow-Origin: http://localhost:3000（不要用*配合 credentials） - 若后端无法改，可用本地代理（如 Vite 的
server.proxy或 Webpack DevServer 的proxy）把 /api 请求转到后端地址
要不要封装一个统一的请求函数
直接裸用 fetch 很快会重复处理 loading、token 注入、错误 toast、超时等逻辑。封装是必要的，但别过早抽象成“万能 request 库”。
- 至少提取公共 base URL、默认 headers（如带
Authorization）、统一错误处理 - 避免在封装里自动重试或自动刷新 token —— 这些逻辑依赖具体业务流程，放外层更可控
- 类型安全建议配合 TypeScript 接口定义 response 结构，而不是靠 any 或随意的 then 链
真正麻烦的从来不是发请求，而是处理「请求已发、响应未到」之间的状态，以及服务器返回了意料之外的字段或结构 —— 这些没法靠工具链自动解决。
