Как исправить заголовки токенов CSRF и проблемы с CORS на веб-сайте React + Django

У меня есть приложение, работающее с react в качестве интерфейса и django (с поддержкой all-auth) в качестве серверной части. Когда я пользуюсь онлайн-хостингом, я сталкиваюсь со следующими проблемами:

TypeError: NetworkError when attempting to fetch resource. AuthContext.js:37:14

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost/\_allauth/browser/v1/auth/session. (Reason: header ‘x-csrftoken’ is not allowed according to header ‘Access-Control-Allow-Headers’ from CORS preflight response).

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost/\_allauth/browser/v1/auth/session. (Reason: CORS request did not succeed). Status code: (null).

и,

Access to fetch at 'http://localhost/_allauth/browser/v1/auth/session' from origin 'https://privatevoti.vercel.app' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.Understand this errorAI
allauth.js:128 
            
            
           GET http://localhost/_allauth/browser/v1/auth/session net::ERR_FAILED
f @ allauth.js:128
(anonymous) @ allauth.js:259
(anonymous) @ AuthContext.js:32
rs @ react-dom.production.min.js:243
ku @ react-dom.production.min.js:285
(anonymous) @ react-dom.production.min.js:281
k @ scheduler.production.min.js:13
R @ scheduler.production.min.js:14Understand this errorAI
AuthContext.js:33 TypeError: Failed to fetch
    at f (allauth.js:128:22)
    at allauth.js:259:16
    at AuthContext.js:32:5
    at rs (react-dom.production.min.js:243:332)
    at ku (react-dom.production.min.js:285:111)
    at react-dom.production.min.js:281:391
    at k (scheduler.production.min.js:13:203)
    at MessagePort.R (scheduler.production.min.js:14:128)
(anonymous) @ AuthContext.js:33
Promise.catch
(anonymous) @ AuthContext.js:32
rs @ react-dom.production.min.js:243
ku @ react-dom.production.min.js:285
(anonymous) @ react-dom.production.min.js:281
k @ scheduler.production.min.js:13
R @ scheduler.production.min.js:14Understand this errorAI
privatevoti.vercel.app/:1 Access to fetch at 'http://localhost/_allauth/browser/v1/config' from origin 'https://privatevoti.vercel.app' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.Understand this errorAI
allauth.js:128 
            
            
           GET http://localhost/_allauth/browser/v1/config net::ERR_FAILED
f @ allauth.js:128
(anonymous) @ allauth.js:223
(anonymous) @ AuthContext.js:36
rs @ react-dom.production.min.js:243
ku @ react-dom.production.min.js:285
(anonymous) @ react-dom.production.min.js:281
k @ scheduler.production.min.js:13
R @ scheduler.production.min.js:14Understand this errorAI
AuthContext.js:37 TypeError: Failed to fetch
    at f (allauth.js:128:22)
    at allauth.js:223:16
    at AuthContext.js:36:5
    at rs (react-dom.production.min.js:243:332)
    at ku (react-dom.production.min.js:285:111)
    at react-dom.production.min.js:281:391
    at k (scheduler.production.min.js:13:203)
    at MessagePort.R (scheduler.production.min.js:14:128)

Когда я проверяю файлы cookie CSRF с помощью элемента inspect, они отсутствуют. Как мне это исправить?

Я перепробовал множество вариантов конфигурации django settings.py,

INSTALLED_APPS = [
    'django_extensions',

    'django.contrib.admin',
    'django.contrib.auth',
    
    'allauth',
    'allauth.account',
    'allauth.headless',

    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'api.apps.ApiConfig',
    'spotify.apps.SpotifyConfig',
    'accounts.apps.AccountsConfig',
    'rest_framework',

    'corsheaders'
]
WHITENOISE_INDEX_FILE = True  # Serve index.html for 404s
APPEND_SLASH = False          # Disable redirects to append slashes

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    "allauth.account.middleware.AccountMiddleware",
    'whitenoise.middleware.WhiteNoiseMiddleware',
]
...
...
CORS_ALLOWED_ORIGINS = [
    "https://privatevoti.vercel.app",  # Your Vercel frontend
    "http://localhost:3000",  # For local testing
]

CSRF_TRUSTED_ORIGINS = [
    "https://privatevoti.vercel.app",
    'http://localhost',
    'http://localhost:3000',
    'http://localhost:8000',
]

ALLOWED_HOSTS = [
    "privatevoti.vercel.app",
    'localhost',
    '127.0.0.1',
    'woronihottest100-production.up.railway.app',
]

CORS_ALLOW_HEADERS = list(default_headers) + [
    "authorization",
    "content-type",
    "x-csrftoken",
    "x-requested-with",
]

CORS_ALLOW_CREDENTIALS = False
CORS_ALLOW_ALL_ORIGINS = True
SESSION_COOKIE_DOMAIN = None
CSRF_COOKIE_DOMAIN = "vercel.app"
SESSION_COOKIE_SECURE = False
CSRF_COOKIE_SECURE = True
SESSION_COOKIE_HTTPONLY = False
CSRF_COOKIE_HTTPONLY = False
CSRF_COOKIE_SAMESITE = 'None'  # Required for cross-origin requests

Я пробовал различные конфигурации и перестановки этих параметров.

Как мне устранить проблему с отсутствием токена csrf, вызванную CORSA?

Вернуться на верх