How to fix CORS - same domain, Django API and React site

I have a page developed in React deployed with vercel, which makes requests to a Django web server. I've put them under my domain: one is page.example.com and the other is api.example.com. However, when the page makes requests to api.example.com I get a CORS error.

If i mouse over, the message in chrome is:

cross origin resource sharing error: HeaderDisallowedByPreflightResponse

In the console, this is the error;

Access to XMLHttpRequest at 'https://api.example.com/api/example_route/' from origin 'https://site.example.com' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.

When I look at Azure web app, in the stream log, I only see the OPTIONS requests, not the GETs.

My settings look like this:

INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'rest_framework',
'api.apps.ApiConfig',
'djoser',
'rest_framework.authtoken',
"rest_framework_api_key",
'oauth2_provider',
'drf_api_logger',  
'corsheaders',
]


MIDDLEWARE = [                                                                   
'django.middleware.security.SecurityMiddleware',
'whitenoise.middleware.WhiteNoiseMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware', 
'corsheaders.middleware.CorsMiddleware',                     
'django.middleware.common.CommonMiddleware',                                 
'django.middleware.csrf.CsrfViewMiddleware',                                 
'django.contrib.auth.middleware.AuthenticationMiddleware',                   
'django.contrib.messages.middleware.MessageMiddleware',                      
'django.middleware.clickjacking.XFrameOptionsMiddleware', 
'drf_api_logger.middleware.api_logger_middleware.APILoggerMiddleware'                   

]

I've tried

CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_ALL_ORIGINS = True

as well as

CORS_ALLOW_ALL_ORIGINS = False
CORS_ALLOW_CREDENTIALS = True
CORS_ALLOWED_ORIGINS = ["https://page.example.com"]
CORS_ORIGIN_WHITELIST = ("https://page.example.com')

, to no avail.

We should never add Access-Control-Allow-Origin as a request header in the frontend code.

Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response, therefore it will only give problems, unless the web server has been configured to send an Access-Control-Allow-Headers: Access-Control-Allow-Origin response header.

In short: it is only a response header, not a request one.

Reference: “Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response” despite valid CORS config