请求Spotify API的/me端点获取用户热门曲目和艺术家时返回403错误

你的403错误核心原因是授权流程中未请求必要的权限范围（Scope），同时API调用格式也存在小问题，具体修复步骤如下：

1. 补充必要的权限Scope #

Spotify的/me/top/tracks和/me/top/artists接口必须要求user-top-read权限，你的授权URL里未包含该scope，导致生成的access token没有访问这类用户私有数据接口的权限。

具体修改： #

• 在App.js中新增权限常量：

const SCOPE = 'user-top-read';

• 将该scope传递给LogButton组件：

<LogButton 
  isLoggedIn={isLoggedIn} 
  setIsLoggedIn={setIsLoggedIn} 
  setToken={setToken} 
  clientId={CLIENT_ID} 
  redirectUri={REDIRECT_URI} 
  authEndpoint={AUTH_ENDPOINT} 
  responseType={RESPONSE_TYPE}
  scope={SCOPE} // 新增此行
></LogButton>

• 修改LogButton.js中的授权URL，拼接scope参数：

href={`${props.authEndpoint}?client_id=${props.clientId}&redirect_uri=${props.redirectUri}&response_type=${props.responseType}&scope=${encodeURIComponent(props.scope)}`}

2. 修正API调用格式 #

你调用getMyTopTracks和getMyTopArtists时传入的是字符串'limit=10'，但spotify-web-api-node的方法要求传入配置对象而非查询字符串：

修改App.js中的获取函数： #

const getTracks = function() {
  spotifyNode.getMyTopTracks({ limit: 10 })
    .then(res => {
      console.log(res);
      setSongs(res.body.items); // 同步更新状态用于渲染
    })
    .catch(err => console.error('获取热门曲目失败:', err));
}

const getArtists = function() {
  spotifyNode.getMyTopArtists({ limit: 10 })
    .then(res => {
      console.log(res);
      setArtists(res.body.items); // 同步更新状态用于渲染
    })
    .catch(err => console.error('获取热门艺术家失败:', err));
}

3. 验证修复 #

修改完成后必须退出登录并重新授权，因为旧的access token未包含新增的权限。重新登录后生成的token会带有user-top-read权限，此时调用接口即可正常返回数据。

你能正常调用艺术家专辑接口的原因是，这类接口属于公共数据接口，不需要用户私有权限的授权，因此不受影响。

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