个人网站对接接口，常见起点是给页面增加动态内容：展示文章列表，或接入查询服务。拿到接口地址后，写一段请求代码并不复杂，但开发环境返回了数据，放到线上却可能加载失败；页面正常显示，也可能已经把访问凭证暴露给访客。

接入前，把接口文档里的调用限制与网站部署方式对上。只有静态页面的网站，与带有后端服务的网站，能承担的调用方式不同。

请求直接从浏览器发出，密钥放在哪里

浏览器直接调用接口，部署负担较小，适合明确允许公开访问、支持相应来源请求的数据接口。接口要求携带私密密钥时，就不要把它写进页面脚本。访客通过浏览器开发者工具，能够查看发送的请求及其中的参数。

把密钥放进前端项目的环境变量，也未必隐藏了它。如果构建过程把变量替换进网页代码，发布后仍然能被读取。判断依据是密钥最终在哪里使用，而不是配置文件叫什么名字。

这种情况下，把调用放到自己的服务端：页面请求本站地址，服务端读取密钥并访问外部接口，再返回页面所需的数据。纯静态托管无法执行这段逻辑，可以增加托管平台提供的服务端函数，或另行部署后端。

转发入口也要限制用途。固定外部接口地址和允许的参数，别让访客提交任意网址让服务器代为访问；否则，一个用于展示内容的入口可能被当成公共代理，消耗接口额度和服务器资源。

本地拿到数据，上线页面却一直加载

跨域限制经常出现在这一步。网页与接口不属于同一来源时，浏览器会检查接口响应中的授权信息。命令行工具能够取得数据，并不能证明网页也能读取它。

例如，假设一个个人作品站使用静态托管，准备展示外部平台的公开文章列表。站长在本地命令行里调用成功，上线后列表却空白，浏览器控制台提示跨域错误。检查发现，接口没有允许该网站来源读取响应。

这时，反复修改页面里的数据解析代码没有作用。处理方向取决于接口提供方的规则：若开放来源授权，就按文档登记网站域名；若只支持服务端调用，就增加一个本站转发入口。把浏览器请求改成 no-cors 也解决不了列表展示，因为脚本无法读取这种模式下返回的响应内容。

在这个假设情境中，站长选择用托管平台的服务端函数获取文章列表，页面改为请求本站路径。代价是多维护一段服务端代码，还要核对函数的执行限制和接口调用额度。若当前套餐不支持函数，接入仍会停在部署条件上，不能仅靠修改前端完成。

后续上线测试改为打开正式域名检查页面请求，不再只用命令行验证接口。自定义域名与预览地址的授权差异，也留到对应环境中分别确认。

接口暂时不可用时，页面显示什么

接口接入后，页面要区分“没有内容”和“请求失败”。文章列表为空，可能是正常返回；接口超时却显示“暂无文章”，会让访客误以为站点没有更新。

请求期间保留加载状态，超过设定等待时间后结束等待，显示“内容暂时无法加载”和重试入口。别让整页一直转圈，也别让一次外部请求失败阻塞作品介绍等静态内容。

对允许缓存的公开内容，保留最近一次成功结果，并标明更新时间。缓存时长按接口规则与内容更新频率设置，涉及个人信息的响应另行处理，避免混入公共缓存。

发布前，核对线上页面没有暴露私密凭证，再测试一次接口失败时的展示。已经接入的动态区域，要在失败后停止等待，并让访客知道下一步能做什么。