CSRF Token Issue in Django REST Framework

The issue you're experiencing is common with Django's CSRF protection. Even though the csrftoken cookie is set, Django is still reporting it as missing. This typically happens because the token isn't being properly included in your request headers.

Why This Is Happening

When making non-GET requests to Django (POST, PUT, DELETE, etc.), you need to:

1. Have the csrftoken cookie (which you do)
2. Include the token value in your request headers or form data

How to Fix It

1. Include the CSRF Token in Your Requests

In your Vue app, you need to extract the token from cookies and include it in your requests:

JAVASCRIPTCopied
// Get the CSRF token from cookies
function getCSRFToken() {
  const cookieValue = document.cookie
    .split('; ')
    .find(row => row.startsWith('csrftoken='))
    ?.split('=')[1];
  return cookieValue;
}

// Include it in your axios requests
axios.defaults.headers.common['X-CSRFToken'] = getCSRFToken();

// Or for individual requests
axios.post('/your-endpoint/', data, {
  headers: {
    'X-CSRFToken': getCSRFToken()
  }
});

2. Check Your Configuration

Your configuration settings have these issues:

PYTHONCopied
CORS_ORIGIN_WHITELIST = ("localhost:8080", "127.0.0.1:8080")  # Missing protocol

This should include the protocol:

PYTHONCopied
CORS_ORIGIN_WHITELIST = ["http://localhost:8080", "http://127.0.0.1:8080"]

Your CSRF_TRUSTED_ORIGINS looks correct, but ensure you're using the correct protocol (http vs https).

3. Check for Middleware

Ensure the CSRF middleware is enabled in your Django settings:

PYTHONCopied
MIDDLEWARE = [
    # ...
    'django.middleware.csrf.CsrfViewMiddleware',
    # ...
]

4. Check for SameSite Cookie Issues

Modern browsers enforce strict SameSite cookie policies. If your frontend and API are on different domains or ports, you might need to adjust:

PYTHONCopied
CSRF_COOKIE_SAMESITE = 'Lax'  # Or 'None' if using HTTPS
SESSION_COOKIE_SAMESITE = 'Lax'  # Or 'None' if using HTTPS

# If using 'None', you must also set secure=True
if CSRF_COOKIE_SAMESITE == 'None':
    CSRF_COOKIE_SECURE = True
    SESSION_COOKIE_SECURE = True

Since it was working yesterday and stopped today, check if any browser updates occurred or if any settings were changed in your application.