Spotify API回调URL含#而非?，Django中如何获取参数？

问题原因 #

URL中#后的内容属于URI片段（Fragment），浏览器只会在客户端保留这部分数据，不会将其发送到服务器。所以你的Django后端通过request.GET完全拿不到这些参数，request.build_absolute_uri()也只会返回服务器实际收到的#之前的URL。

解决方案 #

必须通过前端JavaScript先获取并解析哈希参数，再将其传递给后端：

步骤1：在回调页面添加前端解析逻辑 #

创建一个简单的HTML页面（或在Django模板中嵌入），用JS提取哈希参数：

<!DOCTYPE html>
<html>
<head>
    <title>Spotify Callback</title>
</head>
<body>
    <script>
        // 截取哈希部分并解析参数
        const hashContent = window.location.hash.slice(1);
        const hashParams = new URLSearchParams(hashContent);
        
        // 提取所需参数
        const accessToken = hashParams.get('access_token');
        const tokenType = hashParams.get('token_type');
        const expiresIn = hashParams.get('expires_in');
        const state = hashParams.get('state');

        // 通过POST请求将参数传给后端处理
        fetch('/callback/process/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': getCookie('csrftoken') // Django需验证CSRF令牌
            },
            body: JSON.stringify({
                access_token: accessToken,
                token_type: tokenType,
                expires_in: expiresIn,
                state: state
            })
        })
        .then(res => res.json())
        .then(data => {
            console.log('后端处理完成:', data);
            // 处理完成后可跳转至成功页面
            window.location.href = '/auth-success/';
        });

        // 辅助函数：获取页面Cookie中的CSRF令牌
        function getCookie(name) {
            let cookieValue = null;
            if (document.cookie && document.cookie !== '') {
                const cookies = document.cookie.split(';');
                for (let i = 0; i < cookies.length; i++) {
                    const cookie = cookies[i].trim();
                    if (cookie.startsWith(`${name}=`)) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        }
    </script>
</body>
</html>

步骤2：修改Django后端视图 #

新增一个专门处理前端传递参数的视图，原回调视图负责返回带JS逻辑的页面：

from django.http import HttpResponse, JsonResponse
from django.views.decorators.csrf import csrf_exempt

def callback(request, format=None):
    # 返回带前端解析逻辑的页面（建议用Django模板渲染，而非直接读文件）
    return HttpResponse(open('templates/spotify_callback.html').read())

# 生产环境请优先用CSRF令牌验证，避免使用csrf_exempt
@csrf_exempt
def callback_process(request):
    if request.method == 'POST':
        import json
        params = json.loads(request.body.decode('utf-8'))
        access_token = params.get('access_token')
        
        if access_token:
            print('获取到的access_token:', access_token)
            # 此处可将令牌存入session、数据库，或进行后续业务逻辑处理
            return JsonResponse({'status': 'success'})
    
    return JsonResponse({'status': 'error'}, status=400)

替代方案：前端重定向传递参数 #

如果不想用AJAX，也可以让前端解析参数后，重定向到带查询字符串的后端路由（注意：此方式令牌会暴露在URL中，有安全风险，仅适用于测试场景）：

const hashParams = new URLSearchParams(window.location.hash.slice(1)).toString();
window.location.href = `/callback/process/?${hashParams}`;

此时后端视图可直接通过request.GET.get('access_token')获取参数。

注意事项 #

• 隐式授权模式不返回刷新令牌，令牌过期后需引导用户重新授权
• 务必验证state参数，防止CSRF攻击

内容的提问来源于stack exchange，提问作者Samarth Mummigatti