如何在React中获取Django Session中的UserInfo数据？

React无法直接访问Django的Session存储，必须通过后端API接口来传递Session中的数据。下面是具体实现步骤：

1. Django后端编写API接口 #

首先在Django中创建一个视图函数，用于读取Session里的UserInfo并以JSON格式返回：

from django.http import JsonResponse

def get_user_info(request):
    # 从Session中获取UserInfo，不存在则返回空数组
    user_info = request.session.get('UserInfo', [])
    return JsonResponse({'userInfo': user_info})

接着在项目的urls.py中配置对应的路由：

from django.urls import path
from .views import get_user_info

urlpatterns = [
    # 其他路由
    path('api/user-info/', get_user_info, name='get_user_info'),
]

2. React前端请求接口获取数据 #

在React组件中，你可以使用原生fetch或者axios来请求上述接口，拿到UserInfo数据后渲染到页面。

用原生fetch实现 #

import { useEffect, useState } from 'react';

function UserInfoDisplay() {
    const [userInfo, setUserInfo] = useState([]);

    // 组件挂载时请求数据
    useEffect(() => {
        // 同域下使用相对路径，跨域则写完整域名
        fetch('/api/user-info/')
            .then(res => res.json())
            .then(data => setUserInfo(data.userInfo))
            .catch(err => console.error('获取用户信息失败:', err));
    }, []);

    return (
        <div className="user-info">
            <h3>我的信息</h3>
            <ul>
                {userInfo.map((info, idx) => (
                    <li key={idx}>{info}</li>
                ))}
            </ul>
        </div>
    );
}

export default UserInfoDisplay;

用axios实现（需先安装：npm install axios） #

import { useEffect, useState } from 'react';
import axios from 'axios';

function UserInfoDisplay() {
    const [userInfo, setUserInfo] = useState([]);

    useEffect(() => {
        axios.get('/api/user-info/')
            .then(res => setUserInfo(res.data.userInfo))
            .catch(err => console.error('获取用户信息失败:', err));
    }, []);

    return (
        <div className="user-info">
            <h3>我的信息</h3>
            <ul>
                {userInfo.map((info, idx) => (
                    <li key={idx}>{info}</li>
                ))}
            </ul>
        </div>
    );
}

export default UserInfoDisplay;

3. 关键注意事项 #

• CSRF保护：Django默认启用CSRF保护，前端请求时需要带上CSRF Token。可以从Cookie中提取csrftoken并添加到请求头：

// 封装获取Cookie的工具函数
function getCookie(name) {
    let value = null;
    if (document.cookie) {
        const cookies = document.cookie.split(';');
        for (const cookie of cookies) {
            const [key, val] = cookie.trim().split('=');
            if (key === name) {
                value = decodeURIComponent(val);
                break;
            }
        }
    }
    return value;
}

// 带CSRF Token的fetch请求
fetch('/api/user-info/', {
    headers: {
        'X-CSRFToken': getCookie('csrftoken'),
    },
})

• 跨域配置：如果React和Django运行在不同域名/端口（比如React在localhost:3000，Django在localhost:8000），需要在Django中配置CORS：
  1. 安装django-cors-headers：pip install django-cors-headers
  2. 在settings.py中添加配置：

INSTALLED_APPS = [
    # 其他应用
    'corsheaders',
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
]

# 允许React所在的域名
CORS_ALLOWED_ORIGINS = ["http://localhost:3000"]

# 允许携带Cookie（Session依赖Cookie）
CORS_ALLOW_CREDENTIALS = True

3. 前端请求时要开启携带凭证：
   • fetch：添加credentials: 'include'
   • axios：添加withCredentials: true

• Session有效性检查：后端视图可以增加判断，比如检查用户是否登录、Session中是否存在UserInfo，避免返回无效数据。

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