Получение ошибки CSRF 403 на сервере django и клиенте nexjs

Я отправляю запросы на сервер Django из next.js, но получаю ошибку :403 Forbidden (CSRF cookie not set.), даже после отправки csrf-токена.

Я запускаю и сервер Django, и next.js локально.

Запрос к тому же api из postman/insomnia работает отлично но не с моим приложением next.js.

Я немного покопался и обнаружил, что это может быть проблема с CORS, поэтому я сделал некоторые изменения в settings.py, но все равно получаю ту же ошибку.

Пожалуйста, помогите мне понять, что происходит не так, как я могу отладить, и какие изменения я должен сделать.

Сначала я получаю CSRF-токен с помощью другого API, который работает нормально. Затем во втором API я добавляю свой CSRF-токен.

выборка в Next.js

      const uploadFile = async () => {
        // Select file from input element or any other method
        const fileInput = document.getElementById('fileInput');
        const file = fileInput.files[0];
      
        const form = new FormData();
        form.append("image", file);

        const options = {
          method: 'POST',
          headers: {
            cookie: 'csrftoken=2V7dKpZXLN24pLDdDkub9GxM2ljzI0nI',
            'Content-Type': 'multipart/form-data; boundary=---011000010111000001101001',
            'X-CSRFToken': '2V7dKpZXLN24pLDdDkub9GxM2ljzI0nI'
          }
        };

        options.body = form;

        fetch('http://127.0.0.1:8000/getinfo', options)
          .then(response => response.json())
          .then(response => console.log(response))
          .catch(err => console.error(err));
      };

my settings.py в Django :

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = [
    'mymedic.pythonanywhere.com',
    '127.0.0.1',
]


# Application definition

INSTALLED_APPS = [
    'backend.apps.BackendConfig',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'corsheaders'
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    

    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',

    'django.middleware.common.CommonMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
CSRF_COOKIE_HTTPONLY=False
SESSION_COOKIE_SECURE=False
CSRF_COOKIE_SECURE=False
CORS_ALLOW_CREDENTIALS = True
# https://stackoverflow.com/questions/53215045/redirect-is-not-allowed-for-a-preflight-request
CORS_ALLOW_HEADERS = (
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
    'user',
    'apikey',
    'Referer',
    'credentials',
    'image,'
    'username',
)

CORS_ALLOWED_ORIGINS = [
    'http://localhost:3000',  # Add the origin of your Next.js application

]

CORS_ALLOW_ALL_ORIGINS = False  # Disable allowing all origins

CSRF_TRUSTED_ORIGINS = [
    'http://localhost:3000',
    'https://*.mydomain.com',
    'https://*.127.0.0.1'
]

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