使用Spotify API交换授权码获取Access Token时出现Error 400求助

你的代码里存在几个关键问题，直接导致了400错误，以下是具体分析和修复方案：

1. 变量名拼写不一致 #

getAccessToken函数的参数定义是clientId，但内部拼接参数时误用了未定义的client_id，导致client_id参数传递错误。

修复后的代码片段：

async function getAccessToken(clientId, code) {        
    const params = new URLSearchParams();
    params.append("client_id", clientId); // 修正为参数名clientId
    params.append("grant_type", "authorization_code");
    params.append("code", code);
    params.append("redirect_uri", "http://127.0.0.1:5500/position.html"); 
    // ... 后续代码
}

2. 缺少必填的Basic认证头部 #

Spotify的/api/token接口要求必须携带Basic认证头部：需要将你的client_id和client_secret拼接成client_id:client_secret格式，经过Base64编码后，放在Authorization请求头中。

添加认证头部的代码：

// 替换为你在Spotify开发者后台获取的客户端密钥
const clientSecret = "你的Spotify客户端密钥";
const authHeader = "Basic " + btoa(clientId + ":" + clientSecret);

const result = await fetch("https://accounts.spotify.com/api/token", {
    method: "POST",
    headers: { 
        "Content-Type": "application/x-www-form-urlencoded",
        "Authorization": authHeader // 新增Basic认证头部
    },
    body: params
});

3. 建议添加错误响应解析 #

400错误的具体原因（如授权码无效、跳转地址不匹配等）可以通过解析响应体JSON获取，方便定位问题：

const data = await result.json();
if (!result.ok) {
    console.error("获取token失败:", data.error, data.error_description);
    return;
}
console.log("成功获取token:", data);
// 此处可保存access_token和refresh_token用于后续接口调用

额外检查项 #

• 确认redirect_uri与你在Spotify开发者后台配置的地址完全一致，包括协议（http/https）、域名、端口和路径，不能有任何差异。
• 授权码code只能使用一次，重复使用会返回invalid_grant错误，需要重新发起授权流程获取新的code。

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