部署在GitHub Pages的React应用调用Spotify API时出现INVALID_CLIENT错误

这个错误太典型了——Spotify的OAuth安全机制要求所有用于授权的重定向URI必须预先在开发者控制台注册，你本地用的localhost:3000虽然能正常工作，但部署到GitHub Pages后，应用的域名完全变了，Spotify不认这个未提前注册的地址，自然就抛出INVALID_CLIENT: Invalid redirect URI错误了。按下面的步骤一步步修复：

• 第一步：更新Spotify开发者控制台的重定向URI

  1. 登录你的Spotify开发者账户，打开开发者控制台找到你创建的应用
  2. 进入应用的Settings页面，定位到Redirect URIs区域
  3. 添加你的GitHub Pages部署地址，比如https://你的用户名.github.io/你的仓库名/（注意末尾的斜杠很关键，必须和代码里的配置完全一致）
  4. 如果你的应用用了自定义域名，也要把自定义域名的完整地址加进去，比如https://your-custom-domain.com/
  5. 点击Save保存更改

• 第二步：修改React应用中的重定向URI配置
  别再硬编码localhost:3000了！为了同时兼容本地开发和部署环境，建议用动态获取的方式：

  // 替换原来的硬编码URI
  const redirectUri = `${window.location.origin}/`;
  

  这样不管是本地运行还是部署到GitHub Pages，都会自动获取当前页面的域名作为重定向地址，彻底避免环境不一致的问题。

• 第三步：清除浏览器缓存并重新测试
  浏览器可能缓存了旧的授权请求信息，先清除对应域名的缓存，然后重新打开部署后的应用，尝试授权Spotify，应该就能正常获取令牌了。

额外提醒：如果你的应用用了HashRouter（GitHub Pages默认推荐使用这个路由模式），不需要在重定向URI里包含哈希部分，Spotify会自动处理，但一定要确保你在控制台注册的URI和代码里生成的完全一致，大小写、斜杠都不能出错。

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