微信小程序 / H5 调用第三方 API：密钥、域名与失败路径怎么放

正确姿势不是“前端拿到地址就直接请求”，而是先判断这个接口能不能让前端接触。公开、无密钥、只读的接口可以评估直连；只要涉及 API Key、签名、私有配额或审计，就应统一走自己的后端代理。微信小程序和 H5 的限制并不相同，不能混为一谈。

本文只给通用工程判断。微信平台规则，以及 API.PLUS 的具体域名、鉴权方式和限额，本次材料没有提供，相关细节待核实，不能据本文断言。

先判断：能不能让前端直连#

小程序侧通常要在后台配置 request 合法域名，并使用 HTTPS；具体是否允许端口、IP 或重定向，以平台当前文档为准。H5 侧受浏览器同源策略约束，跨域能否成功取决于服务端 CORS 响应，而不是接口“看起来能打开”。

只要接口要求密钥，就不应把密钥写进小程序包、H5 构建产物或 localStorage。应放在服务端环境变量中，例如 YOUR_KEY，前端只调用自己的代理路径。

代理层要做的三件事#

1. 固定上游。 代理只访问预先确认的第三方地址，不要把任意 URL 透传出去，避免变成开放代理或 SSRF 入口。
2. 统一超时与错误。 网络失败、401/403、429、5xx 要分开处理。超时不等于上游没有成功，POST 自动重试前应确认上游支持幂等键。
3. 控制域名与跨域。 H5 的 CORS 只允许明确来源；小程序后台只配置必要域名；日志记录请求标识，但不记录密钥和完整签名。

一个未执行的前端骨架#

下面示例只调用自己的代理路径 /api/proxy，不直接访问第三方。示例未实际执行，需按项目环境调整。

const controller = new AbortController();
const timer = setTimeout(() => controller.abort(), 5000);

try {
  const res = await fetch("/api/proxy", {
    signal: controller.signal,
    headers: { "Accept": "application/json" }
  });
  if (!res.ok) throw new Error("HTTP " + res.status);
  const data = await res.json();
  // 继续校验业务码与字段，而不是只看 HTTP 200
} finally {
  clearTimeout(timer);
}

小程序里对应使用 wx.request，目标域名应是自己的后端。它不走浏览器 CORS，但仍受小程序合法域名配置约束。

联调时先验收这些边界#

• 在构建产物和源码中搜不到密钥；密钥只存在服务端环境变量。
• 需要预检的 H5 请求能拿到允许来源；不要用宽泛来源搭配凭据。
• 小程序请求域名已在后台配置，失败时能区分“域名未配置”和“接口返回错误”。
• 构造超时、429、5xx、无效 JSON：前端不把失败渲染成空列表，避免误判为“没有数据”。
• 日志有请求标识，但不记录密钥、完整签名或用户隐私。

结论#

接入 API.PLUS 前，先确认其请求方式、鉴权字段、配额与返回结构；本次材料没有提供这些信息，不能替官方下结论。工程上更稳的做法是：前端只调自己的后端，后端持有密钥并访问固定上游，超时、错误和重试都有明确边界。这样比追求某个“前端直连技巧”更容易核对，也更容易回退。