HTML 无法直接调用 API，必须通过 JavaScript（如 fetch）实现；常见失败原因是 file:// 协议触发 CORS 限制，需用本地服务器运行并配置后端响应头。
HTML 本身不能直接调用 API，必须借助 JavaScript（通常是 fetch 或 XMLHttpRequest）来发起 HTTP 请求。纯 HTML 文件没有执行能力，所有接口调用逻辑都得写在 标签里或外部 JS 文件中。
为什么直接在 HTML 里写 fetch 常失败？
常见报错如 TypeError: Failed to fetch 或控制台提示 CORS error，根本原因是 浏览器 的同源策略限制 —— 你本地双击打开的 file:// 页面无法发送跨域请求，服务端也未配置 Access-Control-Allow-Origin 响应头。
- 本地开发时，不要用文件协议（
file://）直接打开 HTML，改用本地服务器，比如：python3 -m http.server 8000然后访问
http://localhost:8000/index.html - 确保目标 API 允许你的域名或
*，否则 前端 必被拦截；后端需返回Access-Control-Allow-Origin: *（开发环境）或具体域名（生产环境） -
fetch默认不带 Cookie，如需鉴权，记得加credentials: 'include'且后端要配Access-Control-Allow-Credentials: true
fetch 调用 GET 接口的基本写法
这是最常用场景：从后端拉取 JSON 数据并渲染到页面。注意处理 Promise 链、错误分支和 DOM 插入时机。
- 必须用
await或.then()处理异步结果，不能直接赋值给变量 -
response.json()是另一个 Promise，要单独 await 或链式调用 - 推荐用
try/catch包裹整个流程，网络错误、解析失败、HTTP 状态码异常（如 404/500）都要覆盖
async function loadUserData() { try { const response = await fetch('https://jsonplaceholder.typicode.com/users/1'); if (!response.ok) {throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); document.getElementById('user-name').textContent = data.name; } catch (err) {console.error('Failed to load user:', err); document.getElementById('user-name').textContent = '加载失败'; } }POST 提交表单数据到 API 的注意事项
与 GET 不同，POST 需显式设置请求头、构造请求体，且服务端通常要求 Content-Type: application/json。
立即学习 “ 前端免费学习笔记（深入）”；
- 请求体必须是字符串，用
JSON.stringify()转换对象 - 漏写
headers或写错Content-Type，后端可能收不到数据或解析为undefined - 如果后端接收的是表单格式（
application/x-www-form-urlencoded），要用URLSearchParams构造请求体，不是 JSON
async function submitForm() { const formData = { username: 'alice', email: 'a@example.com'}; const response = await fetch('/api/register', { method: 'POST', headers: { 'Content-Type': 'application/json'}, body: JSON.stringify(formData) }); const result = await response.json(); console.log(result); }真正卡住人的往往不是语法，而是 CORS 配置、本地协议限制、响应体没 await、状态码没判断 —— 这些地方一错，控制台可能只显示“undefined”或空白，却找不到源头。
