html如何api_HTML调用API接口的实现方法【详解】_技术教程

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” 或空白，却找不到源头。