Как решить проблемы CORS с бэкендом Django на Heroku для фронтенда Flutter?

Я работаю над бэкендом Django, размещенным на Heroku, и фронтендом Flutter, размещенным на https://anirni.web.app. Мои API-запросы блокируются из-за политики CORS, и я пытаюсь настроить Django для правильной работы с этим

**Моя текущая установка: **

  • Бэкенд: Django, размещенный на Heroku.
  • Фронтенд: Приложение Flutter, размещенное на https://anirni.web.app, а также тестируемое локально (http://localhost:52360).
  • Библиотека CORS: Я использую django-cors-headers.

**Релевантные части моего файла settings.py: **

`

** То, что я пробовал до сих пор: **

  • Временно добавьте CORS_ALLOW_ALL_ORIGINS = True, но проблема сохраняется.
  • Проверяем, что HTTPS включен и Heroku правильно перенаправляет HTTP на HTTPS.
  • Тестирование с помощью curl и Postman, где ответы выглядят нормально, но запросы из Flutter блокируются из-за CORS.

**Ожидаемое поведение: ** Фронтенд Flutter должен иметь возможность отправлять запросы (включая запросы OPTIONS preflight) на бэкенд Django без блокировки.

**Ошибка из консоли Flutter и браузера: **

Доступ к XMLHttpRequest по адресу 'https://anirnirest-f97872c47bed.herokuapp.com/get_user_info' из origin 'https://anirni.web.app' был заблокирован политикой CORS: На запрашиваемом ресурсе отсутствует заголовок 'Access-Control-Allow-Origin'.

**Дополнительная информация: **

  • API использует rest_framework с аутентификацией на основе токенов (JWT).
  • Я подтвердил, что мои конечные точки API работают независимо.
  • API для получения токенов и публичные API работают отлично. Однако все API, требующие аутентификации (с помощью JWT), блокируются.

Просто выполните эту команду

python manage.py runserver 0.0.0.0:8000

вместо

python manage.py runserver

Кроме того, вы можете изменить порт в первой команде, я просто использовал порт по умолчанию

Чтобы решить проблему CORS, убедитесь, что CorsMiddleware размещен в верхней части списка MIDDLEWARE, выше всех других промежуточных программ, обрабатывающих запрос. Кроме того, обязательно настройте CORS_ALLOW_HEADERS на разрешение необходимых заголовков, таких как content-type

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',
    'whitenoise.middleware.WhiteNoiseMiddleware',
]

CORS_ALLOW_HEADERS = list(default_headers) + [
    "authorization",
    "x-requested-with",
    "content-type",  # Ensure this is allowed
]
Вернуться на верх