Django, ошибка CORS "Access-Control-Allow-Origin"

Не могу понять, что не так с моей конечной точкой Django DRF api. Я получаю ошибку CORS

Cross-Origin Request Blocked: Политика одинакового происхождения запрещает чтение удаленного ресурса по адресу http://127.0.0.1:8000/api/. (Причина: CORS заголовок 'Access-Control-Allow-Origin' отсутствует). Код состояния: 200.

Проблема в том, что я выполнил все шаги в Интернете, чтобы исправить это.

  • Я установил 'django-cors-headers'
  • Добавил приложение corsheaders в INSTALLED_APPS выше rest_framework и приложение, включающее конечную точку api.
  • Добавил промежуточное ПО cors в начало списка промежуточного ПО в settings.py
  • Добавлено 'CORS_ALLOWED_ORIGINS = ('http://localhost:3000' # React app) (Также пробовали с CORS_ORIGIN_ALLOW = True)
  • Четырежды проверили, что API POST запрос включает в себя косую черту.

Ничто не помогает. Может быть, я что-то забыл? Спасибо за любую помощь.

Это мой settings.py:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'corsheaders',
    'rest_framework',
    'core.apps.CoreConfig',

]

CORS_ALLOWED_ORIGINS = (
    'http://localhost:3000',  # for localhost (REACT Default)
)


MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'corsheaders.middleware.CorsMiddleware',
    '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',
    'django.middleware.common.CommonMiddleware',
]

Не уверен, насколько это важно, но если я отправляю POST запрос из Insomnia, он работает нормально, а из React - нет, вот мой запрос к react на всякий случай:

const postSomeData = async () => {
    const res = await axios.post(
      "http://127.0.0.1:8000/api/",
      { promptQuery: "pls just work already" },
      {
        headers: {
          "Content-Type": "application/json",
        },
      }
    );
  };

Спасибо!

Код выглядит нормально, похоже, проблема в порядке следования промежуточных программ. Попробуйте поместить corsheader посередине между sessionmiddleware и commonmiddleware ... что-то вроде этого :

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware', #here
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

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

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