请求协助排查JavaScript获取Spotify API AccessToken的错误

核心问题与修复方案： #

1. 客户端凭证末尾的空格导致认证失败
   在requestAuthorization函数中，你给client_id和client_secret赋值时额外添加了末尾空格：

   client_id = "client_id "; // 末尾存在多余空格
   client_secret = "client_secret "; // 末尾存在多余空格
   

   这会让btoa(client_id + ":" + client_secret)生成的Basic Auth编码完全错误，Spotify无法识别你的客户端身份，最终返回的是无效的短token（甚至可能是错误的临时token）。
   修复：删除末尾空格，替换为你在Spotify开发者后台获取的真实凭证：

   client_id = "你的真实Client ID";
   client_secret = "你的真实Client Secret";
   

2. 重复传递客户端凭证
   授权码流程中，仅需通过Authorization请求头的Basic Auth方式传递客户端凭证即可，但你在fetchAccessToken的请求body中又重复添加了client_id和client_secret，这可能导致请求参数冲突。
   修复：修改fetchAccessToken的body构造逻辑，移除重复的凭证参数：

   function fetchAccessToken(code) {
     let body = "grant_type=authorization_code";
     body += "&code=" + code;
     body += "&redirect_uri=" + encodeURI(redirect_uri);
     callAuthorizationApi(body);
   }
   

3. 未定义的redirect_uri变量
   代码中多处使用redirect_uri但未声明该变量，这会导致授权跳转和token请求中的回调地址为空或错误。Spotify要求回调地址必须与开发者后台配置的地址完全一致（包括协议、域名、路径），否则会拒绝生成有效token。
   修复：添加redirect_uri的定义，确保与后台配置匹配：

   const redirect_uri = "https://你的回调地址"; // 替换为实际配置的回调URL
   

4. 优化错误排查逻辑
   在handleAuthorizationResponse的错误分支中，建议同时打印状态码和响应内容，这能帮你快速定位具体问题（比如回调地址不匹配、权限范围错误等）：

   function handleAuthorizationResponse() {
     if (this.status === 200) {
       // ... 现有逻辑
     } else {
       console.error(`请求失败，状态码：${this.status}`);
       console.error(`响应内容：${this.responseText}`);
       alert(`授权失败：${this.responseText}`);
     }
   }
   

额外验证步骤： #

• 检查Spotify开发者后台的重定向URI配置，确保和代码中的redirect_uri完全一致
• 确认申请的权限（scope）在后台已正确配置，且用户授权时同意了这些权限
• 使用获取到的token调用Spotify的/me接口测试，验证是否能正常返回用户信息

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