OpenWeatherMap是最稳妥的免费稳定天气API，新用户享每分钟1000次调用，支持多查询方式；需规避需验证或聚合中转类API，API key须存环境变量；错误处理需关注401、404、429响应；数据渲染禁用innerHTML，应使用textContent和属性赋值；本地开发跨域问题须通过本地HTTP服务或代理解决。
怎么选免费又稳定的天气 API
OpenWeatherMap 是目前最稳妥的选择，新注册用户直接获得每分钟 1000 次调用配额，current 接口返回结构清晰、字段完整，且支持城市名、经纬度、IP 地理定位三种查询方式。避免用需要邮箱验证或强制绑定支付方式的接口（比如某些国内平台要求企业资质），也别碰返回格式不一致的聚合类中转 API —— 它们常把 404 错误伪装成 200 成功响应，导致前端逻辑误判。
注册后拿到的 API key 要藏在环境变量或服务端代理里，千万别硬编码进前端 JS 文件，否则会被爬走滥用。
用 fetch 调天气接口时怎么处理常见错误
天气请求失败不全是网络问题，更多是参数或权限原因。必须检查三类响应：
-
401 Unauthorized：API key错了或没生效，等 5 分钟再试（OpenWeatherMap 有时有缓存延迟） -
404 Not Found：城市名拼错，比如shangahi；或者用了中文城市名但没加lang=zh_cn参数 -
429 Too Many Requests：本地开发时反复刷新没加防抖，建议加个setTimeout限制手动重试间隔
示例请求片段：
fetch(`https://api.openweathermap.org/data/2.5/weather?q=Beijing&appid=${key}&units=metric`)注意 units=metric 才返回摄氏度，漏掉会默认华氏度。
立即学习“Java免费学习笔记（深入）”；
怎么把 JSON 天气数据安全塞进 HTML 页面
别用 innerHTML += 拼接字符串，容易触发 XSS —— 如果 API 返回的 name 字段被注入了 标签，就完了。一律用 textContent 或属性赋值：
- 城市名：
document.getElementById('city').textContent = data.name - 温度：
document.getElementById('temp').textContent = Math.round(data.main.temp) - 图标：
img.src = `https://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png`
特别注意 data.weather[0].description 是英文，要显示中文就得自己建映射表，比如 {'clear sky': '晴天', 'scattered clouds': '少云'}，不能依赖 API 自动翻译。
为什么本地开发时总报跨域错误，但部署后好了
因为 OpenWeatherMap 接口本身支持 CORS，但浏览器对 file:// 协议页面完全禁用 fetch，所以双击 HTML 运行必失败。解决方法只有两个：
- 用 VS Code 的 Live Server 插件启一个本地
http://127.0.0.1:5500服务 - 或者写个极简 Node.js 代理（3 行代码），把请求从
/weather转发到 OpenWeatherMap，绕过浏览器同源策略
别信“改 Chrome 启动参数禁用安全策略”这种方案，它只在你本机有效，没法给其他人演示。
