Axios blocked by CORS policy with Django REST Framework: 'Access-Control-Allow-Origin' hea-CodePudding

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:

CodePudding user response：

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",

]

CodePudding user response：

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",
]

CodePudding user response：

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