在Next.js中如何使用POST获取的API令牌调用第三方API

首先明确结论：你需要将获取到的access_token通过Authorization请求头传递给第三方API，这是绝大多数基于OAuth2协议的API（包括Swagger文档里常见的Bearer认证）的标准做法。

步骤1：优化令牌获取逻辑 #

你的基础令牌获取代码可以保留，但要注意：多数第三方令牌接口会要求传入额外参数（比如client_id、client_secret、grant_type等，这些信息在对方Swagger的令牌接口文档里能找到），示例补充如下：

export default async function getAccessToken() {
  const res = await fetch('第三方令牌接口URL', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded', // 多数令牌接口要求此类型
      accept: 'application/json'
    },
    body: new URLSearchParams({
      client_id: '你的客户端ID',
      client_secret: '你的客户端密钥',
      grant_type: 'client_credentials' // 根据对方要求的授权类型填写，比如password等
    })
  });
  const data = await res.json();
  return data.access_token; // 返回令牌供后续接口调用使用
}

步骤2：在数据接口请求中携带令牌 #

调用第三方数据接口时，在fetch的请求头里添加Authorization字段，格式为Bearer ${你的access_token}。修正你的getStaticProps代码如下：

export async function getStaticProps() {
  // 先获取有效令牌
  const accessToken = await getAccessToken();

  // 调用第三方数据接口，携带授权令牌
  const res = await fetch('第三方数据接口URL', {
    headers: {
      accept: 'application/json',
      Authorization: `Bearer ${accessToken}` // 核心：添加授权头
    }
  });

  // 注意：不能直接JSON.stringify(res)，需先将响应解析为JSON格式
  const data = await res.json();

  return {
    props: {
      items: data
    },
  };
}

关键注意事项 #

• 确认授权方式：如果对方Swagger文档里的接口要求的不是Bearer认证（比如API Key放在特定自定义头里），需对应调整。可以查看Swagger页面顶部的「Authorize」按钮，里面会明确标注认证规则。
• 令牌过期处理：多数access_token会附带expires_in字段（过期时间），建议实现令牌缓存和刷新逻辑，避免频繁请求令牌或因令牌过期导致接口调用失败。
• 错误处理：添加try/catch捕获请求异常，比如令牌无效、接口返回401/403状态码时的容错处理。

内容的提问来源于stack exchange，提问作者greendalf