在Django RESTful API与React Native中配置CSRF防护遇document错误的解决方法

错误原因 #

你遇到的document相关报错，是因为React Native运行在原生容器中，没有浏览器环境的document对象，直接套用Django官方给的浏览器端Cookie读取代码自然会失效。

方案一：修改代码适配React Native的Cookie读取 #

React Native需要借助第三方库来处理Cookie，推荐使用@react-native-cookies/cookies：

1. 安装依赖：

npm install @react-native-cookies/cookies --save
# 或使用yarn
yarn add @react-native-cookies/cookies

2. 重写CSRF Token获取函数：

import CookieManager from '@react-native-cookies/cookies';

async function getCsrfToken() {
  // 替换为你的Django API域名
  const cookies = await CookieManager.get('https://your-django-api-domain.com');
  return cookies.csrftoken?.value || null;
}

// 使用时需异步调用
const csrftoken = await getCsrfToken();

说明：Cookie和域名绑定，必须指定Django服务的正确域名才能获取到csrftoken。

方案二：不依赖Cookie，直接传递CSRF Token #

如果不想处理Cookie，可以让Django主动返回CSRF Token，前端存储后在请求中携带：

Django端配置 #

新增一个视图用于返回CSRF Token：

from django.middleware.csrf import get_token
from django.http import JsonResponse

def get_csrf_token(request):
    csrf_token = get_token(request)
    return JsonResponse({'csrfToken': csrf_token})

记得在urls.py中配置对应的路由。

React Native端实现 #

import AsyncStorage from '@react-native-async-storage/async-storage';

// 首次获取并存储CSRF Token
async function fetchAndStoreCsrfToken() {
  const response = await fetch('https://your-django-api-domain.com/get-csrf-token/');
  const data = await response.json();
  await AsyncStorage.setItem('csrfToken', data.csrfToken);
}

// 发起请求时携带Token
async function sendProtectedRequest() {
  const csrfToken = await AsyncStorage.getItem('csrfToken');
  const response = await fetch('https://your-django-api-domain.com/api/your-endpoint/', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-CSRFToken': csrfToken
    },
    body: JSON.stringify({/* 你的请求数据 */})
  });
  // 处理响应
}

说明：Django默认识别X-CSRFToken请求头，无需额外配置CSRF_HEADER_NAME；如果是跨域请求，需确保Django已配置正确的CORS规则。

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