如何使用Axios让Refresh Token在Spotify API中正常工作？

我帮你排查下这个400错误的问题，几个常见的坑你可以逐个检查：

• Content-Type拼写错误：你代码里写的是applicaton/x-www-form-urlencoded，正确的拼写应该是application/x-www-form-urlencoded——少了个字母"i"！这个拼写错误会让Spotify无法识别你的请求格式，直接返回400。

• 请求参数放错位置：Spotify的token刷新接口要求参数放在**请求体（data）**里，而不是URL参数（params）。你现在用params会把参数拼在URL后面，但这个接口需要表单格式的请求体，所以得把参数移到data里。

• 前端暴露Client Secret的安全隐患：虽然这不是导致400的直接原因，但必须提醒你——把CLIENT_SECRET放在前端代码里是极度危险的！任何人打开浏览器开发者工具就能拿到这个密钥，可能会导致你的Spotify应用被滥用。正确的做法是把刷新token的逻辑放到后端服务里，前端调用自己的后端接口，由后端去请求Spotify的token接口。

下面是修正后的代码示例：

getAccessToken() {
  axios({
    method: 'post',
    url: 'https://accounts.spotify.com/api/token',
    // 用URLSearchParams处理表单数据，确保格式正确
    data: new URLSearchParams({
      grant_type: 'refresh_token',
      refresh_token: this.state.user[0].refresh_token
    }),
    headers: {
      // 修正Content-Type的拼写
      'Content-Type': 'application/x-www-form-urlencoded',
      'Authorization': 'Basic ' + window.btoa(`${process.env.CLIENT_ID}:${process.env.CLIENT_SECRET}`)
    }
  })
  .then(response => {
    // 成功拿到新的accessToken后，记得更新到你的状态或存储里
    console.log('刷新成功，新accessToken:', response.data.access_token);
  })
  .catch(error => {
    // 打印错误详情，方便进一步排查
    console.error('刷新失败:', error.response?.data || error.message);
  });
}

另外，再次强调：一定要把Client Secret移到后端！比如用Node.js写个简单的接口，前端传refresh_token给你的后端，后端用Client ID和Secret去请求Spotify，再把新的accessToken返回给前端。这样才能保证你的应用安全。

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