Spotify Web API授权示例中Client ID未更新问题求助

问题概述 #

克隆Spotify Web API Examples仓库后，已替换app.js中的Client ID和重定向URI，执行npm install和npm start后，点击“Log In with Spotify”仍被重定向到显示“Invalid Client ID”的页面，URL中仍使用默认的yourClientIdGoesHere，多次保存文件、重启服务器无效。

排查与解决步骤 #

• 强制刷新浏览器缓存
  浏览器可能缓存了旧的静态资源，按下Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新页面，清除缓存后重新尝试登录。

• 确认服务器加载的是修改后的文件
  在浏览器地址栏输入http://127.0.0.1:8080/app.js，查看返回的代码内容：

  • 如果仍显示默认的yourClientIdGoesHere，说明服务器未加载修改后的文件：
    1. 检查app.js的保存路径是否正确，确保修改的是仓库根目录下的对应文件；
    2. 若项目使用构建工具（如webpack），需执行构建命令（如npm run build）后再重启服务器；
    3. 关闭服务器后，删除项目的node_modules/.cache目录（如果存在），重新启动服务器。

• 检查登录按钮的触发逻辑
  查看项目的HTML文件（如index.html），确认“Log In with Spotify”按钮是否正确调用了redirectToSpotifyAuthorize函数：

  • 如果按钮的href属性是硬编码的授权URL（带有默认Client ID），需将其改为触发JS函数，例如：

    <button onclick="redirectToSpotifyAuthorize()">Log In with Spotify</button>
    

• 检查代码中是否存在其他Client ID引用
  全局搜索项目中的yourClientIdGoesHere字符串，确认是否在其他文件（如HTML、其他JS文件）中还有硬编码的默认值，逐一替换为你的Client ID。

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