fetch() 是现代浏览器发送 GET/POST 请求的首选，需注意错误处理、编码、CORS 和认证；兼容旧浏览器时仍需掌握 XMLHttpRequest。
用 fetch() 发送 GET 请求最简单也最常用
现代浏览器中，fetch() 是首选方案，语法简洁、基于 Promise，不用引入额外库。它默认发送 GET 请求，适合获取数据（如用户列表、配置项）。
常见错误是忽略网络失败和 HTTP 错误状态的区分：网络异常（如断网）会 reject，但 404、500 这类响应码仍会 resolve，需手动检查 response.ok 或 response.status。
- 必须用
await response.json()（或.text()等）读取响应体，否则拿到的是Response对象，不是实际数据 - URL 中带中文或特殊字符时，先用
encodeURIComponent()编码参数，避免 400 错误 - 不加
credentials: 'include'时，跨域请求不会携带 Cookie，登录态无法传递
const url = 'https://api.example.com/users?id=' + encodeURIComponent('张三');
try {
const response = await fetch(url, { credentials: 'include' });
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const data = await response.json();
console.log(data);
} catch (err) {
console.error('请求失败:', err.message);
}
POST 提交 JSON 数据要设好 Content-Type 头
向服务器提交结构化数据（如表单、配置更新），通常用 POST + JSON。关键点不在方法本身，而在请求头和载荷格式是否匹配。
漏掉 headers 或写错值会导致后端解析失败——比如 Express 默认不解析 text/plain，而 Django 可能直接返回 415 Unsupported Media Type。
立即学习“Java免费学习笔记（深入）”；
-
Content-Type必须是'application/json'，不能是'json'或漏写 - 请求体必须是字符串，用
JSON.stringify()转换对象，不能直接传对象字面量 - 如果后端接收
application/x-www-form-urlencoded，就得用new URLSearchParams()构造 body
const data = { name: '李四', email: 'lisi@example.com' };
const response = await fetch('/api/users', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
});
处理跨域（CORS）错误不能只靠前端改代码
看到浏览器控制台报 No 'Access-Control-Allow-Origin' header，第一反应不该是“怎么让 fetch 跨过去”，而是确认服务端是否允许该源访问。
前端加 mode: 'cors'（fetch 默认值）或设置 credentials 都没用，除非服务端明确返回对应响应头。开发时临时绕过只能靠代理（如 Webpack DevServer 的 proxy）或后端配 CORS 中间件。
- 本地开发时，Chrome 启动参数加
--disable-web-security属于危险操作，仅限调试，不可用于测试逻辑 - 若后端是 Express，用
cors包比手写头更可靠：app.use(cors({ origin: 'http://localhost:3000' })) - 请求带认证信息（Cookie / Authorization）时，后端
Access-Control-Allow-Origin不能为*，必须指定具体域名
需要兼容老浏览器？XMLHttpRequest 还得会写
尽管 fetch 已成主流，但部分企业内网系统仍要求支持 IE11 或旧版 Edge。这时 XMLHttpRequest 不可替代，且它的上传进度监听、请求中止等能力在某些场景下比 fetch 更直接。
容易踩的坑是事件注册顺序和状态判断：必须在调用 xhr.open() 之后、xhr.send() 之前绑定 onload 和 onerror，否则可能错过回调；readyState === 4 仅表示请求完成，仍需检查 status 是否在 200–299 范围。
- 设置请求头要用
xhr.setRequestHeader()，且必须在open()之后、send()之前 - 发送 JSON 时，
send()的参数同fetch：需JSON.stringify()，且手动设Content-Type - 取消请求用
xhr.abort()，而fetch需配合AbortController
const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/login');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 300) {
console.log(JSON.parse(xhr.responseText));
}
};
xhr.onerror = function() {
console.error('网络错误');
};
xhr.send(JSON.stringify({ user: 'admin', pass: '123' }));
实际项目里，真正卡住人的往往不是“怎么发请求”，而是搞不清响应格式（JSON？HTML？重定向？）、没处理好凭据传递时机、或者把跨域问题当成前端能单独解决的事。多看 Network 面板里的 Request/Response Headers，比反复改 JS 更有效。 
