部署Spotify Web应用：将重定向URI从http://localhost:3000/callback改为公网地址

第一步：确认Spotify开发者控制台的URI配置 #

• 确保已添加Amplify分配的完整回调URI，格式为 https://你的Amplify域名.com/callback（必须是https协议，不能用http）
• 如果使用了Amplify的预览分支域名，也要把对应分支的回调URI（比如 https://分支名.你的Amplify域名.com/callback）添加到Spotify控制台的重定向URI列表中

第二步：配置AWS Amplify的重定向规则 #

1. 登录AWS Amplify控制台，找到你的应用
2. 进入App settings > Rewrites and redirects页面
3. 在Redirect rules区域添加核心规则：
   • Source address: </^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>
   • Target address: /index.html
   • Type: 200 (Rewrite)
4. 补充一条针对回调路径的规则（避免路由被重定向到首页）：
   • Source address: /callback
   • Target address: /callback
   • Type: 200 (Rewrite)

第三步：验证代码中的URI配置 #

• 检查代码里Spotify授权请求的redirect_uri参数，确保和Spotify控制台的URI完全一致，包括协议、域名和完整路径
• 建议用Amplify环境变量配置：在App settings > Environment variables中添加REDIRECT_URI=https://你的Amplify域名.com/callback，代码里直接读取该变量，避免硬编码出错

第四步：重新部署并测试 #

• 在Amplify控制台的Deployments页面触发重新部署，确保新配置生效
• 用浏览器无痕模式访问应用测试，避免旧缓存干扰

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