# 🔧 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` 都统一为：
```javascript
const REDIRECT_URI = window.location.origin + '/'
// 生产：https://sports.rucky.cn/
// 开发：http://localhost:5173/
```

## 📋 检查清单

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

### Spotify Dashboard
- [ ] 删除所有旧的 Redirect URIs
- [ ] 添加 `https://sports.rucky.cn/`（带斜杠）
- [ ] 添加 `http://localhost:5173/`（带斜杠）
- [ ] 保存设置

### 代码检查
- [x] `src/views/MusicRhythm.vue`: `window.location.origin + '/'`
- [x] `src/views/SpotifyCallback.vue`: `window.location.origin + '/'`
- [x] 两个文件使用相同的 Client ID

## 🧪 测试步骤

1. **清理浏览器状态**
   ```javascript
   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 设置正确后，重新测试！**