HTML无法直接调用API，必须通过JavaScript（如fetch）实现；常见失败原因是file://协议触发CORS限制，需用本地服务器运行并配置后端响应头。
HTML 本身不能直接调用 API，必须借助 JavaScript（通常是 fetch 或 XMLHttpRequest）来发起 HTTP 请求。纯 HTML 文件没有执行能力，所有接口调用逻辑都得写在 <script> 标签里或外部 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” 或空白，却找不到源头。
