React单页应用使用PKCE流获取Spotify Access Token遇400错误求助

问题根源 #

你的代码里存在localStorage键名不匹配的低级错误：

• 在login()方法中，你用localStorage.setItem('code-verifier', codeVerifier);存储验证器，键名是code-verifier（横杠分隔）
• 但在getAccessToken()方法中，你用localStorage.getItem('code_verifier');读取，键名是code_verifier（下划线分隔）

这直接导致读取到的codeVerifier为null，向Spotify的token接口请求时缺少关键参数，因此返回400错误。

修复方案 #

统一两处的localStorage键名即可，把getAccessToken()里的读取代码改成和存储时一致：

let codeVerifier = localStorage.getItem('code-verifier');

额外检查点（可选） #

如果修复后仍有问题，可以排查以下几点：

• 确认redirectUri和你在Spotify开发者后台配置的完全一致（包括协议、域名、端口、路径，大小写也不能错）
• 确保generateCodeChallenge函数完全按照官方实现，没有修改导致code challenge生成错误
• 检查重定向后URL中的code参数是否有效，避免重复使用同一个code请求token

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