Azure部署React+DRF应用的CSRF跨域提交问题求助

我们将React前端作为Web App部署在Azure，DRF后端以容器形式部署在Azure，采用Cookie进行身份认证，后端使用PostgreSQL数据库。目前从数据库读取数据（GET请求）功能正常，但向后端提交POST请求时因CSRF问题失败——本地测试时功能正常，部署到Azure后出现错误。

当前后端配置 #

CORS_ALLOW_ALL_ORIGINS = False

CORS_ALLOW_CREDENTIALS = True
CORS_ALLOWED_ORIGINS = [
    "http://localhost:5173",
    "https://frontend.azurewebsites.net",
    "https://apibackend.azurewebsites.net",
]

CSRF_TRUSTED_ORIGINS = [
    "http://localhost:5173",
    "https://frontend.azurewebsites.net",
    "https://apibackend.azurewebsites.net",
]

SESSION_COOKIE_SAMESITE = "None"
CSRF_COOKIE_SAMESITE = "None"
SESSION_COOKIE_SECURE = True  # Set True in production over HTTPS
CSRF_COOKIE_SECURE = True  # Set True in production over HTTPS
CSRF_COOKIE_HTTPONLY = False

问题现象 #

• API页面可正常显示CSRF Token
• 前端提交POST请求时未携带该Token，Cookie中已存在csrftoken和sessionid
• 请求返回403错误：

  POST https://apibackend.azurewebsites.net/api/inspection/inspection/ 403 (Forbidden)
  错误信息：{detail: 'CSRF Failed: CSRF token missing.'}

解决方案 #

1. 前端主动携带CSRF Token到请求头 #

DRF的CSRF验证要求非GET请求必须在请求头中携带X-CSRFToken字段，仅Cookie存在token无法通过验证。具体实现：

• 用原生JS解析Cookie获取csrftoken：

  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.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
  }
  

• 发送POST请求时添加请求头：

  const csrftoken = getCookie('csrftoken');
  fetch('https://apibackend.azurewebsites.net/api/inspection/inspection/', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-CSRFToken': csrftoken
    },
    credentials: 'include', // 必须携带Cookie
    body: JSON.stringify(yourData)
  })
  

2. 检查Azure环境配置 #

• 确认后端Azure App Service的WEBSITE_USE_HTTPS设置为On，强制使用HTTPS，避免Secure属性的Cookie在HTTP环境下无法被携带
• 核对CSRF_TRUSTED_ORIGINS中的域名是否与前端、后端实际访问地址完全匹配（注意协议、是否带www等细节）

3. 后端补充配置 #

• 确保视图类或函数使用了csrf_protect装饰器（DRF的APIView默认已包含，但自定义视图需确认）
• 可新增一个获取CSRF Token的接口，让前端初始化时调用，确保Cookie被正确设置：

  from django.middleware.csrf import get_token
  from rest_framework.decorators import api_view
  from rest_framework.response import Response
  
  @api_view(['GET'])
  def get_csrf_token(request):
      return Response({'csrfToken': get_token(request)})
  

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