Django REST Framework: Ошибка "Нет заголовка 'Access-Control-Allow-Origin'" в Chrome, работает в Firefox

Чтобы установить пакет django-cors-headers, выполните команду:

pip install django-cors-headers

Затем добавьте его в ваш список установленных приложений:

INSTALLED_APPS = [
    ...
    'corsheaders',
    ...
]

После этого необходимо внести изменения в ваш список MIDDLEWARE. Не забудьте добавить его первым в списке:

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    ...
]

Если вы хотите разрешить доступ для всех источников, добавьте следующую настройку до списка установленных приложений:

CORS_ORIGIN_ALLOW_ALL = True

Или вы можете создать список разрешённых источников:

CORS_ORIGIN_WHITELIST = [
    'http://google.com',
    'http://hostname.example.com',
    'http://localhost:8000',
    'http://127.0.0.1:9000'
]

Эти настройки помогут вам настроить CORS в вашем Django приложении.

Сначала проверьте свой URL запроса. У меня возникла такая проблема при использовании vue-resource. В моем случае ошибка была связана с отсутствием '/' в конце URL.

Убедитесь, что вы используете 127.0.0.1, а не localhost, потому что при использовании localhost браузер может попытаться найти IPv6-адрес... Альтернативно, вы можете настроить localhost явно на 127.0.0.1 в файле /etc/hosts.

Возможно, вам стоит обратить внимание на порядок вызова ваших промежуточных слоев (middleware). Если они не расположены в правильной последовательности, это может привести к указанной ошибке. Похоже, что ваш 'django.middleware.security.SecurityMiddleware' должен находиться ниже 'corsheaders.middleware.CorsMiddleware'.

Кроме того, вам, возможно, потребуется добавить в ваш код строку CORS_ALLOW_CREDENTIALS = True.

Надеюсь, это поможет!

Чтобы настроить CORS (Cross-Origin Resource Sharing) в вашем проекте Django, вам необходимо выполнить следующие шаги в файле settings.py:

MIDDLEWARE = [
    # ...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    # ...
]

INSTALLED_APPS = [
    'corsheaders',
    # ...
]

# Чтобы разрешить все домены, установите CORS_ORIGIN_ALLOW_ALL в True
CORS_ORIGIN_ALLOW_ALL = True  # это разрешает запросы с любых доменов

# Или, чтобы разрешить конкретные домены, используйте CORS_ORIGIN_WHITELIST
CORS_ORIGIN_WHITELIST = (
    'http://example.com',
    'http://127.0.0.1:8000',
    'http://localhost:8000',
)

Кроме того, в вашем фронтенд-запросе необходимо добавить соответствующие заголовки:

var get_request = $.ajax({
    type: 'GET',
    "headers": {
        "accept": "application/json",
        "Access-Control-Allow-Origin": "*"
    },
    url: 'http://example.com',
});

Если проблема не решена, убедитесь, что CORS включен на сервере, с которого вы отправляете запросы (например, http://example.com).