Django Vue3 access-control-allow-origin is not allowed

I have a Django rest-api project. Vue is used on the front of the project. I get the following error when requesting via Vue:

print console:

Access to XMLHttpRequest at 'https://api.iyziwell.com/api/user/register' from origin 'https://main.d398abgajqt044.amplifyapp.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.

my settings.py:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'webpack_loader',
    'account',
    'rest_framework',
    'rest_framework.authtoken',   
    'rest_framework_simplejwt',
    'corsheaders',

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

CORS_ORIGIN_ALLOW_ALL_ORIGINS = True
CORS_ALLOW_CREDENTIALS = True

CORS_ALLOWED_ORIGINS = [
    'https://main.d398abgajqt044.amplifyapp.com',
    'http://localhost:8082',
]
CORS_ALLOWED_ORIGIN_REGEXES = [
    'https://main.d398abgajqt044.amplifyapp.com',
    'http://localhost:8082',
]

CORS_ALLOW_HEADERS = (
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
)

request page = https://main.d398abgajqt044.amplifyapp.com

Back to Top