Ionic 6+Angular项目调用Spotify API遇invalid_client错误求助

最可能的原因：Authorization头格式错误 #

你的代码中Authorization头的Basic关键字后缺少了一个空格，这是触发invalid_client错误的常见原因。Spotify API要求Basic和后续的base64编码字符串之间必须有空格分隔。

修正后的代码 #

async function getToken() {
    const clientid = 'xxxxx';
    const clientsecret = 'xxxxx';
    const buf = new Buffer.from(`${clientid}:${clientsecret}`);

    const result = await fetch('https://accounts.spotify.com/api/token', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            // 修正：Basic后添加空格
            'Authorization': 'Basic ' + buf.toString('base64')
        },
        body: 'grant_type=client_credentials'
    });

    const data = await result.json();
    return data;
}

其他排查方向 #

• 核对Client ID/Secret：确认从Spotify开发者平台复制的Client ID和Client Secret完全正确，没有多余空格、遗漏字符或大小写错误。
• 前端密钥暴露风险：在Ionic/Angular前端代码中直接硬编码Client Secret存在严重安全隐患，建议将获取Token的逻辑迁移到你的后端服务，前端通过调用自有后端接口获取Token，避免密钥泄露。
• 请求格式检查：确保Content-Type确实为application/x-www-form-urlencoded，请求体grant_type=client_credentials没有额外的空格或编码问题。

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