Axios blocked by CORS policy with Django REST Framework: 'Access-Control-Allow-Origin' header in the response must not be wildcard

Question

Using vuejs3 ans axios, I'm trying to make a API call out to a django project, and getting a CORS error on the chrome side. Not sure what setting I'm missing here...

The preflight OPTIONS response returned is ok, but chrome is upset that the 'Access-Control-Allow-Origin' header is "*".

I'm using django-rest-framework with django-cors-headers .

django.settings:

ALLOWED_HOSTS = ["*"]

# CORS
CORS_ALLOW_ALL_ORIGINS = False  # was initially True
CORS_ALLOW_HEADERS = "*"

CORS_ALLOW_CREDENTIALS = True
CORS_ALLOWED_ORIGINS = ["https://mydomain", "http://localhost:8080", "http://127.0.0.1:8080"]

# Application definition
INSTALLED_APPS = [
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    "corsheaders",
    ...
]

MIDDLEWARE = [
    "django.middleware.security.SecurityMiddleware",
    "django.contrib.sessions.middleware.SessionMiddleware",
    "django.middleware.locale.LocaleMiddleware",
    "corsheaders.middleware.CorsMiddleware",
    "django.middleware.common.CommonMiddleware",
    "django.middleware.csrf.CsrfViewMiddleware",
    ...
]

vuejs/axios side:

axios.defaults.xsrfHeaderName = 'X-CSRFToken';
axios.defaults.xsrfCookieName = 'csrftoken';
axios.defaults.withCredentials = true;
const url = `https://mydomin/my/endpoint/`;
response = axios.get(url);

I thought setting CORS_ALLOW_ALL_ORIGINS to False and defining CORS_ALLOWED_ORIGINS values would resolve the issue, but the Access-Control-Allow-Origin header is still showing as "*".

Am I missing a setting?

Here's the Options header result:

Answer 1

Try CORS_ALLOW_HEADERS as list like this

CORS_ALLOW_HEADERS = [
"accept",
"accept-encoding",
"authorization",
"content-type",
"dnt",
"origin",
"user-agent",
"x-csrftoken",
"x-requested-with",

]

Answer 2

Change CORS_ALLOW_HEADERS to this. I tried it and worked

CORS_ALLOW_HEADERS = [
    "accept",
    "accept-encoding",
    "authorization",
    "content-type",
    "content-disposition",
    "dnt",
    "origin",
    "user-agent",
    "x-csrftoken",
    "x-requested-with",
]

Answer 3

Maybe other middleware is preventing the CORS middleware to set the header. The documentation states:

CorsMiddleware should be placed as high as possible, especially before any middleware that can generate responses such as Django's CommonMiddleware or Whitenoise's WhiteNoiseMiddleware. If it is not before, it will not be able to add the CORS headers to these responses.

So try to change the order of the middleware, like:

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.security.SecurityMiddleware',
    ... 
]

Answer 4

What is in your headers of your http requests? It may help to include ""Access-Control-Allow-Origin": "*"," if it's not there already.