仪表盘对接API的三大痛点是跨域拦截、参数误传和DOM渲染失败：浏览器静默拦截CORS请求；axios.get参数须用params字段而非拼URL或data；渲染前需确保DOM就绪且元素存在。
直接用 axios 或 fetch 就能对接，但多数人卡在跨域、数据渲染和错误静默这三步上。
为什么 fetch 在仪表盘里经常“没反应”
不是代码写错了，而是浏览器拦截了跨域响应，或你没处理 response.ok 和空响应体。仪表盘页面常直连第三方 API（如天气、监控服务），这些接口往往没开 CORS，fetch 会静默失败——控制台只报 TypeError: Failed to fetch，不告诉你到底是网络不通、证书错误，还是服务器拒绝跨域。
实操建议：
- 先在浏览器地址栏手动访问目标 API URL，确认能返回 JSON 数据且状态码是
200 - 如果返回
403或空白页，基本是服务端未配置Access-Control-Allow-Origin - 开发阶段可用本地代理（如 Vite 的
server.proxy）绕过浏览器限制，不要依赖mode: 'no-cors'——它禁用响应读取，仪表盘拿不到数据 - 必须显式检查
response.ok，不能只靠.catch()：很多 HTTP 错误（如404、500）不会进catch，而是进then但response.ok === false
axios.get() 请求参数传错导致 400 或空数据
仪表盘常需动态传参（如时间范围、设备 ID），但 axios.get(url, config) 的 config 对象里，查询参数必须放在 params 字段下，而不是拼在 URL 后或塞进 data。放错位置会导致后端收不到、解析失败，返回空或 400 Bad Request。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 正确写法：
axios.get('/api/metrics', { params: { start: '2026-10-20', end: '2026-10-27' } })→ 自动转为/api/metrics?start=2026-10-20&end=2026-10-27 - 错误写法：
axios.get('/api/metrics?start=...')—— URL 编码易出错，且无法复用配置 - 错误写法：
axios.get('/api/metrics', { data: { ... } })——GET请求不支持data，会被忽略 - 若后端要求参数在请求头（如
X-Device-ID），要写进headers，不是params
渲染数据时 DOM 元素不存在或被覆盖
仪表盘 HTML 常含多个卡片、图表容器（如 <div id="cpu-chart"></div>），但 JS 执行时可能 DOM 还没就绪，或同一 ID 被多次声明（比如复制粘贴代码忘了改 ID）。结果是 document.getElementById('xxx') 返回 null，后续 .innerHTML 或图表初始化直接报错中断。
实操建议：
- 确保脚本放在
