Django（REST Framework）CSRF与CORS求助：前端分离后遇未解决问题

Hey there! I’ve been through this exact Django-to-SPA split before, so I know how frustrating that last stubborn CORS/CSRF hiccup can be. Since you’ve already nailed most of the setup, let’s dive into the easy-to-miss details that are likely causing the problem:

Common Overlooked Fixes #

• Validate CSRF cookie settings for cross-origin requests: If your SPA uses credentials: 'include' (required for CSRF cookies), double-check these Django settings:
  • CSRF_COOKIE_SAMESITE: For local testing (especially if your API and SPA are on different ports of localhost), set this to 'Lax' instead of 'Strict'—some browsers block Strict cookies across ports.
  • CSRF_COOKIE_SECURE: Only set this to True if you’re using HTTPS. For local dev, keep it False so the cookie is sent over HTTP.
  • CSRF_TRUSTED_ORIGINS: Make sure this includes your SPA’s full origin (e.g., http://localhost:3000—don’t forget the protocol!).
• Confirm the CSRF token is actually being sent in requests: Even if the cookie is set, your SPA might not be grabbing it and adding the X-CSRFToken header. For vanilla JS/React/Vue, use a snippet like this to fetch the token:

  const getCsrfToken = () => {
    const match = document.cookie.match(/csrftoken=([^;]+)/);
    return match ? match[1] : '';
  };
  

  Then include it in all non-GET requests (POST/PUT/DELETE) via the X-CSRFToken header.
• Check middleware order in Django: The corsheaders middleware needs to run before CommonMiddleware and CsrfViewMiddleware to handle preflight requests correctly. Your MIDDLEWARE list should look like this:

  MIDDLEWARE = [
      'corsheaders.middleware.CorsMiddleware',
      'django.middleware.common.CommonMiddleware',
      'django.middleware.csrf.CsrfViewMiddleware',
      # ... rest of your middleware
  ]
  

• Rule out cookie domain mismatches: If your API and SPA are on subdomains (e.g., api.yourdomain.com and app.yourdomain.com), set CSRF_COOKIE_DOMAIN = '.yourdomain.com' (with the leading dot) to share the cookie across subdomains. For local dev with different ports, CSRF_COOKIE_DOMAIN = 'localhost' usually works, but some browsers might require exact port matches—try testing with a tool like Postman to see if the issue is browser-specific.
• Test with a minimal request: Strip down your SPA’s request to the bare bones (no extra headers, just the necessary ones) and compare it to a working request in Postman. This can help you spot if an extra header or configuration in your SPA is triggering the issue.

If You’re Still Stuck... #

To narrow this down further, could you share a bit more context?

• The exact error message from your browser’s console (is it a CORS block, or a CSRF token invalid/missing error?)
• Your Django version and the version of django-cors-headers you’re using
• A snippet of your SPA’s request code (e.g., fetch or axios call)
• The relevant sections of your Django settings.py (CORS and CSRF configurations)

That extra info will help pinpoint the last remaining issue!

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