Отсутствие 'Access-Control-Allow-Origin' на AWS

У меня есть Django REST API, расположенный в AWS ECS, и VueJS фронтенд, расположенный в AWS S3, распространяемый AWS CloudFront, пытающийся связаться с бэкендом, используя Axios, и я продолжаю получать вариации этой ошибки:

Access to XMLHttpRequest at 'https://api.example.com/api/v1/auth/login/' from
origin 'https://example.com' has been blocked by CORS policy: Response to preflight
request doesn't pass access control check: No 'Access-Control-Allow-Origin' header
is present on the requested resource.

Я использую приложение Django django-cors-headers и я настроил его в моем settings.py файле как,

from corsheaders.defaults import default_headers

...

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    # REST
    'rest_framework',
    'rest_framework.authtoken',
    # testing
    'coverage',
    # auth
    'dj_rest_auth',
    'django.contrib.sites',
    'allauth',
    'allauth.account',
    'allauth.socialaccount',
    'dj_rest_auth.registration',
    # cors
    'corsheaders',
    ...
]

SITE_ID = 1

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    ...
]

CORS_ORIGIN_WHITELIST = (
    'http://localhost:8080',
    'https://example.com',
    'https://www.example.com',
)
CORS_ALLOW_CREDENTIALS = True
CORS_ALLOW_HEADERS = list(default_headers) + (
    'X-CSRFTOKEN',
)
CSRF_COOKIE_NAME = "csrftoken"
CSRF_TRUSTED_ORIGINS = [
    "crowd-scout.com",
]

На стороне фронтенда я настроил Axios как,

import axios from 'axios';

export const HTTP = axios.create({
  baseURL: "https://api.example.com",
  withCredentials: true,
  xsrfHeaderName: "X-CSRFTOKEN",
  xsrfCookieName: "csrftoken",
})

И я пытаюсь отправить данные в мой Django REST API как,

import {HTTP} from '@/common/http'


function getToken (form) {
  return HTTP.post('/api/v1/auth/login/', form)
}

На стороне AWS, следуя этой документации, я настроил CloudFront несколькими способами:

1. Under CloudFront > Origins I've set Header Name: Origin and Value: https://example.com
2. Under CloudFront > Behaviors > Cache Key and Origin Requests I've set the following
   • Cache policy and origin request policy (recommended)
   • Cache policy: CachingOptimized
   • Origin request policy - optional: CORS-S3Origin
   • Response headers policy - optional: CORS-with-preflight-andSecurityHeadersPolicy

Я также установил эту политику CORS на ведро S3, которое я использую:

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "https://example.com",
            "https://www.example.com"
        ],
        "ExposeHeaders": [
            "X-CSRFTOKEN"
        ]
    }
]

Я пытался следовать официальной документации AWS, но пока что это была охота на диких гусей. Есть ли дополнительное место для установки настроек CORS, кроме CloudFront, S3 и Django? Нужно ли мне добавлять заголовки к запросам от клиента?

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