newToy/DEBUG_REDIRECT_ISSUE.md

🔍 调试 Spotify 回调问题

🐛 问题描述

症状： 授权成功，但返回的 URL 是：

https://sports.rucky.cn/?code=...&state=...#/%2Fcallback

而不是期望的：

https://sports.rucky.cn/callback?code=...&state=...

🎯 可能的原因

1. Spotify Dashboard 配置错误

检查 Spotify Dashboard 中是否配置了：

❌ 错误：https://sports.rucky.cn/
✅ 正确：https://sports.rucky.cn/callback

解决方案：

1. 访问 https://developer.spotify.com/dashboard/4ed200672ba1421baa31b9859bd84d39/settings
2. 点击 "Edit Settings"
3. 检查 "Redirect URIs" 中是否有 https://sports.rucky.cn/callback
4. 如果只有 https://sports.rucky.cn/，需要：
   • 删除 https://sports.rucky.cn/
   • 添加 https://sports.rucky.cn/callback
5. 点击 "Save"

2. 代码中 redirect_uri 不一致

检查代码中的配置：

src/views/MusicRhythm.vue:

const REDIRECT_URI = window.location.origin + '/callback'
// 应该生成：https://sports.rucky.cn/callback

验证方法： 在浏览器控制台运行：

console.log(window.location.origin + '/callback')
// 应该输出：https://sports.rucky.cn/callback

3. 缓存问题

如果之前配置了 https://sports.rucky.cn/，浏览器可能缓存了旧的授权请求。

解决方案：

# 清除所有相关的 localStorage
localStorage.removeItem('spotify_code_verifier')
localStorage.removeItem('spotify_auth_state')
localStorage.removeItem('spotify_access_token')
localStorage.removeItem('spotify_token_expires_at')

# 或者使用无痕模式重试

✅ 已实施的临时修复

在 src/views/Home.vue 中添加了检测和转发逻辑：

onMounted(() => {
  // 检查是否是 Spotify 授权回调
  const params = new URLSearchParams(window.location.search)
  if (params.has('code')) {
    // 转发到 /callback 路由处理
    router.push({
      name: 'SpotifyCallback',
      query: Object.fromEntries(params)
    })
  }
})

这样即使 Spotify 返回到根路径，也会自动转发到正确的回调页面。

🧪 测试步骤

1. 清除缓存

// 在浏览器控制台运行
localStorage.clear()

2. 确认配置

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

应该看到：

Redirect URIs:
✅ http://localhost:5173/callback
✅ https://sports.rucky.cn/callback

3. 重新部署

npm run build
rsync -avz --delete dist/ user@sports.rucky.cn:/var/www/sports.rucky.cn/

4. 测试授权流程

1. 访问 https://sports.rucky.cn/
2. 进入音乐律动页面
3. 点击 "连接 Spotify 账号"
4. 授权后应该：
   • 返回到应用（可能是根路径）
   • 自动转发到 SpotifyCallback 页面
   • 显示 "授权成功！"
   • 自动跳转到音乐律动页面

🔧 完整修复方案

方案 A：修复 Redirect URI 配置（推荐）

优点： 符合标准，最干净的解决方案 步骤：

1. 在 Spotify Dashboard 中只配置 /callback 路径
2. 删除其他可能的配置
3. 等待几分钟让配置生效
4. 测试

方案 B：使用根路径 + 转发（当前方案）

优点： 容错性强，即使配置错误也能工作 缺点： URL 中会短暂出现 code 参数 状态： 已实施 ✅

📝 最佳实践

根据 Spotify 官方文档，Redirect URI 应该：

1. ✅ 使用具体的路径（如 /callback）
2. ✅ 在 Dashboard 中精确匹配
3. ✅ 包括协议、域名、端口、路径
4. ❌ 避免使用根路径 /

推荐配置：

开发：http://localhost:5173/callback
生产：https://sports.rucky.cn/callback

🎯 下一步

1. 立即做： 确认 Spotify Dashboard 中的配置
2. 如果错误： 修改为 /callback 并保存
3. 清除缓存： 使用无痕模式测试
4. 重新测试： 完整走一遍授权流程

📞 如果还有问题

检查浏览器控制台的日志：

// 应该看到类似的日志
"Detected Spotify callback, redirecting to /callback route"

如果看到这条日志，说明我们的临时修复生效了，即使 Redirect URI 配置不正确，也能正常工作。

---

总结： 大概率是 Spotify Dashboard 中配置了 https://sports.rucky.cn/ 而不是 https://sports.rucky.cn/callback。修改配置即可完美解决。同时我们的代码已经添加了容错逻辑。✅