使用Axios调用Spotify API认证接口返回400错误求助

你的代码里有几个明显问题，导致Spotify接口返回400错误，下面逐一说明并给出修复方案：

错误点分析 #

• Axios配置项误用：你在创建实例时用了form和json参数，但这不是Axios的合法配置项——这是旧版request库的写法，Axios并不识别这些字段。
• 请求体格式不符合要求：Spotify的Client Credentials认证接口要求请求体以application/x-www-form-urlencoded格式发送，且必须包含grant_type=client_credentials表单字段。你的代码既没正确设置请求体，也没配置对应的请求头。
• 响应解构错误：Axios请求成功后，响应数据在返回对象的data属性里，不是response属性。

修复后的代码 #

const axios = require('axios'); // 前端环境请确保已正确引入Axios

const client_id = '你的客户端ID';
const client_secret = '你的客户端密钥';

const authFlow = async () => {
  try {
    // 创建符合要求的Axios实例，配置认证头和Content-Type
    const axiosInstance = axios.create({
      headers: {
        'Authorization': `Basic ${Buffer.from(`${client_id}:${client_secret}`).toString('base64')}`,
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    });

    // 用URLSearchParams构造标准表单数据
    const formData = new URLSearchParams();
    formData.append('grant_type', 'client_credentials');

    // 发送请求并正确解构响应数据
    const { data } = await axiosInstance.post('https://accounts.spotify.com/api/token', formData);
    return data;
  } catch (error) {
    // 打印更详细的错误信息，Spotify通常会在响应体返回具体原因
    console.error('认证失败:', error.response?.data || error.message);
    throw error;
  }
};

关键修改说明 #

1. 请求头配置：明确添加Content-Type: application/x-www-form-urlencoded，告知接口请求数据的格式。
2. 请求体构造：使用URLSearchParams构造表单数据，确保数据被正确编码，符合Spotify接口要求。
3. 无效配置移除：删掉了Axios不支持的form和json参数，改用标准配置方式。
4. 错误排查优化：捕获错误时优先打印error.response?.data，Spotify会在这里返回具体错误原因（如invalid_client或invalid_grant），方便定位问题。

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