newToy/SPOTIFY_REDIRECT_URI_FIX.md

🔧 Spotify Redirect URI 最终修复

⚠️ 问题诊断

错误信息："Invalid redirect URI"

这个错误表示代码中的 redirect_uri 与 Spotify Dashboard 中配置的不完全匹配。

✅ 正确配置

1. Spotify Dashboard 配置

访问：https://developer.spotify.com/dashboard/4ed200672ba1421baa31b9859bd84d39/settings

Redirect URIs 必须精确设置为：

https://sports.rucky.cn/
http://localhost:5173/

⚠️ 注意结尾的斜杠 /！必须加上！

2. 代码配置（已修复）

所有地方的 REDIRECT_URI 都统一为：

const REDIRECT_URI = window.location.origin + '/'
// 生产：https://sports.rucky.cn/
// 开发：http://localhost:5173/

📋 检查清单

请确认以下所有项目都正确：

Spotify Dashboard

• 删除所有旧的 Redirect URIs
• 添加 https://sports.rucky.cn/（带斜杠）
• 添加 http://localhost:5173/（带斜杠）
• 保存设置

代码检查

• src/views/MusicRhythm.vue: window.location.origin + '/'
• src/views/SpotifyCallback.vue: window.location.origin + '/'
• 两个文件使用相同的 Client ID

🧪 测试步骤

1. 清理浏览器状态

   localStorage.clear()
   sessionStorage.clear()
   

2. 确认 Spotify Dashboard

   • 确保 Redirect URIs 正确（带斜杠）
   • 等待 1-2 分钟让更改生效

3. 测试授权流程

   • 访问 https://sports.rucky.cn
   • 进入音乐律动页面
   • 点击"连接 Spotify 账号"
   • 完成授权

🔍 调试信息

如果仍然出错，请检查：

1. 授权 URL 中的 redirect_uri 参数

   • 应该是：redirect_uri=https%3A%2F%2Fsports.rucky.cn%2F
   • 解码后：redirect_uri=https://sports.rucky.cn/

2. Token 请求中的 redirect_uri

   • POST 到 /api/token 时的 redirect_uri 必须与授权时的完全一致

💡 关键点

Spotify 要求 redirect_uri 在三个地方完全一致：

1. Spotify Dashboard 配置
2. 授权请求 URL（/authorize 端点）
3. Token 交换请求（/api/token 端点）

任何细微差别（包括结尾斜杠）都会导致 "Invalid redirect URI" 错误！

🎯 当前状态

• ✅ 代码已统一使用 window.location.origin + '/'
• ⏳ 需要您在 Spotify Dashboard 添加带斜杠的 URLs
• ✅ Hash 模式兼容性已解决
• ✅ 服务初始化问题已修复

---

请确认 Spotify Dashboard 的 Redirect URIs 设置正确后，重新测试！