Spotify Web API获取授权码时Invalid redirect URI错误求助

核心排查方向 #

1. 严格匹配所有环节的Redirect URI
   Spotify对Redirect URI的匹配是完全精确的，哪怕只差一个末尾斜杠、大小写或者协议（http/https）都会判定不匹配。你需要确保三个地方的URI完全一致：

• Spotify开发者控制台的"Redirect URIs"列表
• 前端发起授权请求时的redirect_uri参数（注意要URL编码）
• 后端SpotifyWebApi初始化时的redirectUri配置

比如你后端用的是"http://localhost:3000/"（带末尾斜杠），那前端授权URL里的redirect_uri必须是http%3A%2F%2Flocalhost%3A3000%2F（编码后的带斜杠版本），同时控制台里也要添加这个带斜杠的URI。

2. 检查授权码的有效性
   invalid_grant错误也可能不是URI的问题，而是授权码本身失效：

• Spotify授权码仅10分钟有效，超时后会触发该错误
• 授权码只能使用一次，重复使用会直接失效

确保你每次请求后端/login接口时，都是用刚从Spotify跳转回来的全新授权码。

3. 统一协议与端口
   本地开发时不要混用http和https，比如前端用http://localhost:3000，后端也必须用http，控制台里的URI也要对应http协议，端口号必须完全一致。

代码调试建议 #

后端优化：返回详细错误信息

修改后端的catch逻辑，把Spotify返回的具体错误信息返回给前端，方便精准排查：

.catch((err) => {
    console.error("Spotify授权错误:", err.response.data);
    res.status(400).json(err.response.data);
});

前端确认授权URI参数

确保前端发起授权请求的URL中，redirect_uri参数和后端、控制台完全匹配。比如正确的授权URL示例：

const authUrl = `https://accounts.spotify.com/authorize?client_id=YOUR_CLIENT_ID&response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2F&scope=user-read-private%20user-read-email`;

验证步骤 #

1. 复制后端的redirectUri值，粘贴到Spotify开发者控制台的Redirect URIs列表并保存
2. 把这个值URL编码后，替换前端授权URL中的redirect_uri参数
3. 重新发起授权流程，获取新的授权码后调用后端接口

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