如何通过index.html展示远程数据库的数据：HTML与后端接口通信-html教程-PHP中文网

html中fetch('/api/data')报错主因是file://协议下被浏览器拦截，须部署于http://服务器（如python -m http.server）；后端需返回合法json及access-control-allow-origin头，前端须检查response.ok并妥善处理错误。

如何通过index.html展示远程数据库的数据：html与后端接口通信

HTML 里写 `fetch('/api/data')` 就报错？先看协议和部署位置

浏览器拒绝执行请求，大概率不是代码写错了，而是 HTML 文件正用 file:// 协议双击打开。这种模式下，fetch 直接被拦截，控制台显示 Failed to fetch 或 net::ERR_FAILED。

必须把 index.html 放进 Web 服务器环境运行，比如：

本地开发：用 python3 -m http.server 8000 启一个静态服务，然后访问 http://localhost:8000/index.html
生产环境：Nginx/Apache 配置好 root 路径，确保 HTML 和后端 API 在同一域名下（或至少同源）
若后端 API 在 http://localhost:3000，前端也得从 http://localhost:3000 加载 HTML，否则触发跨域

后端接口返回数据但页面空白？检查响应头和 JSON 格式

即使 fetch 看似成功，也可能因后端没设正确响应头或返回了非 JSON 内容，导致 .json() 报错或静默失败。

后端必须明确声明：

Content-Type: application/json; charset=utf-8
Access-Control-Allow-Origin: *（开发时）或具体域名（生产时）
响应体是合法 JSON：不能有 PHP 的 echo "debug info"; 混在前面，也不能漏掉 json_encode() 包裹

简单验证方式：直接在浏览器地址栏打开 http://localhost:3000/api/data，看是否显示纯 JSON（如 [{"id":1,"name":"Alice"}]），且无 HTML 标签或错误提示。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

前端渲染时数据没插入 DOM？别跳过 error 处理和空值判断

fetch 成功不代表数据可用；网络通、状态码 200、JSON 解析成功，三者缺一不可。常见疏漏：

没加 catch()，错误全吞掉，控制台也看不到提示
后端返回空数组或 null，但前端代码假设一定有 data[0].name，直接报 Cannot read property 'name' of undefined
用 innerHTML = data.map(...).join('') 但 data 是对象而非数组（比如后端返回 {"result": [...]}）

最小安全写法示例：

fetch('/api/users')
  .then(r => {
    if (!r.ok) throw new Error(`HTTP ${r.status}`);
    return r.json();
  })
  .then(data => {
    if (!Array.isArray(data)) throw new Error('Expected array');
    document.querySelector('#list').innerHTML = data
      .map(u => `<div>ID: ${u.id}, Name: ${u.name || '-'}</div>`)
      .join('');
  })
  .catch(err => console.error('Render failed:', err));