React调用Spotify API获取用户热门曲目时Axios 403错误排查

核心问题：权限范围缺失 #

调用/me/top/tracks接口必须持有user-top-read权限，你的授权流程未请求该权限，导致API拒绝访问。

1. 添加必要的权限范围 #

修改授权配置，在授权URL中加入user-top-read权限：

const CLIENT_ID = "++++++++++++++++++++++++++" 
const REDIRECT_URI = "http://localhost:3000"
const AUTH_ENDPOINT = "https://accounts.spotify.com/authorize"
const RESPONSE_TYPE = "token"
// 新增权限范围配置
const SCOPE = "user-top-read"

// 拼接完整授权URL
const authUrl = `${AUTH_ENDPOINT}?client_id=${CLIENT_ID}&redirect_uri=${encodeURIComponent(REDIRECT_URI)}&response_type=${RESPONSE_TYPE}&scope=${encodeURIComponent(SCOPE)}`

2. 验证重定向URI匹配 #

登录Spotify开发者后台，进入你的应用页面，检查Redirect URIs列表是否完全包含http://localhost:3000（协议、端口、路径必须完全一致）。

3. 确认Token有效性 #

• 确保获取的是用户授权的Bearer Token，而非客户端凭证（Client Credentials）生成的Token（后者无用户权限）。
• 可在浏览器控制台打印token，手动验证：将其放入Authorization: Bearer {token}请求头，调用https://api.spotify.com/v1/me接口，若返回用户信息则Token有效。

4. 重新引导用户授权 #

修改权限后，需让用户重新登录授权，旧Token因未包含新权限会持续失效。

额外检查 #

确认topTracks函数的请求URL参数合法：time_range仅支持short_term/medium_term/long_term，limit值需在1-50之间。

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