克隆Spotify网页应用时遭遇redirect_uri参数缺失错误求助

以下是几个排查和解决方向：

• 检查Spotify开发者后台配置
  登录Spotify开发者控制台，找到你的应用，在「Settings」页面的「Redirect URIs」区域，必须添加http://localhost:3000并点击保存。后台未配置的话，即使代码正确也会触发该错误。

• 确保重定向URI参数编码正确
  重定向URI需要经过URL编码后再拼接，避免特殊字符导致参数解析失败。修改代码中的redirectURI定义，使用encodeURIComponent处理：

  const redirectURI= encodeURIComponent("http://localhost:3000");
  

  同时，scopes拼接后的字符串也建议编码：

  export const loginUrl= `${authEndpoint}?client_id=${clientId}&redirect_uri=${redirectURI}&scope=${encodeURIComponent(scopes.join("%20"))}&response_type=token&show_dialog=true`;
  

• 验证生成的登录URL
  在代码中打印loginUrl，直接复制到浏览器地址栏打开，查看地址栏中的参数是否包含完整的redirect_uri=http%3A%2F%2Flocalhost%3A3000，确认参数没有被截断或遗漏。

• 检查变量拼写与作用域
  确认redirectURI变量在拼接URL时的拼写完全一致，没有大小写错误或笔误，同时确保该变量在当前作用域内可访问。

内容的提问来源于stack exchange，提问作者Jean do Nascimento