最常用也最容易出错的是用 fetch + innerHTML 直接渲染服务端 JSON 数据，关键在于安全插入而非能否插入；常见错误包括 DOM 元素未找到、JSON 被误当 HTML 解析导致 XSS 或解析失败。
用 fetch + innerHTML 渲染服务端 JSON 数据
直接把后端返回的 JSON 塞进 HTML，最常用也最容易出错。关键不是“能不能”，而是“怎么塞不崩”。
常见错误现象：TypeError: Cannot set property 'innerHTML' of null（DOM 元素没找到）、Unexpected token （后端返回了 HTML 而非 JSON）、中文乱码（响应头没设 Content-Type: application/json; charset=utf-8）。
使用场景：页面加载后拉取文章列表、用户信息、配置项等结构化数据。
- 务必在
DOMContentLoaded或document.querySelector确认元素存在后再操作 DOM - fetch 后必须用
.json()解析，不能直接把 response 当对象用 - 后端接口返回 200 但内容是错误页（比如 404 模板），会导致
.json()报语法错误，加response.ok判断更稳 - 避免直接拼接 HTML 字符串渲染，有 XSS 风险；如必须拼接，对字段用
textContent赋值，或先用DOMPurify.sanitize()
fetch('/api/user')
.then(r => {
if (!r.ok) throw new Error(`HTTP ${r.status}`);
return r.json();
})
.then(data => {
const el = document.querySelector('#user-name');
if (el) el.textContent = data.name; // 安全，不解析 HTML
})
.catch(err => console.error('加载失败:', err));
Vue/React 项目里怎么接 API 不踩响应式陷阱
框架里不是“拿到数据就完事”，状态更新时机和响应式机制会悄悄吃掉你的数据。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：数据 console.log 有，但页面不更新；组件重复请求；useEffect 里 setState 异步滞后导致闭包旧值。
使用场景：Vue 3 的 setup、React 的 useEffect + useState 加载列表或详情。
- Vue 中用
ref或reactive包裹数据，直接赋值会触发更新；但替换整个对象时，reactive({})无法侦测新增属性，优先用ref - React 中
setState是异步批处理，不要在setState后立刻读 state；依赖数组漏写会导致 effect 不重跑 - 避免在循环中发多个请求却不控制并发（比如 100 条数据每条都 fetch），改用 Promise.all 或分页
- 后端返回字段名带下划线（如
user_name），前端解构时别写成userName——类型检查或运行时都可能静默失败
静态 HTML 页面如何不写后端也能连真实 API
纯 HTML 文件双击打开，浏览器同源策略会直接封禁 fetch，这不是代码问题，是协议限制。
常见错误现象：Access to fetch at 'http://localhost:3000/api' from origin 'null' has been blocked（file:// 协议下 origin 为 null）。
使用场景：本地写 demo、教学示例、嵌入式设备网页、CMS 前端模板调试。
- 开发阶段用
npx serve或 VS Code Live Server 启一个本地 HTTP 服务，让页面走http://127.0.0.1:5000/index.html而非file:///xxx/index.html - 如果真没法起服务（比如部署到只读 U 盘），后端需开启 CORS，且前端 fetch 里加
mode: 'cors'；但 file:// 下即使后端允许，浏览器仍可能拒绝预检请求 - 别信“加
crossorigin属性就能行”——那是给 script/css 用的，对 fetch 无效 - 某些内网环境禁用 fetch，可退到
XMLHttpRequest，但写法更啰嗦，且同样受同源限制
后端返回 HTML 片段时怎么安全插入而不炸掉页面
有些老系统或 CMS 只提供 HTML 字符串接口（比如 常见错误现象：插入后脚本不执行、样式丢失、事件绑定失效、XSS 漏洞被利用、 使用场景：动态加载广告位、评论模块、第三方小部件。 真正麻烦的从来不是“怎么连上”，而是连上之后谁负责清理副作用、谁管缓存失效、谁兜底网络失败——这些逻辑一旦散落在十几个 /widget/latest-news 返回一段 ...），这时不能无脑
innerHTML = htmlStr。
标签被忽略（浏览器策略）。
，要手动提取并 eval 或 createElement('script') 执行，但风险极高，尽量避免DOMParser 解析字符串再 appendChild，比 innerHTML 更可控：const doc = new DOMParser().parseFromString(htmlStr, 'text/html');
Shadow DOM 隔离（兼容性需查）onerror=、javascript: 等危险模式，尤其当内容来自不可信来源fetch 调用里，很快就会变成线上报警的源头。
