MahZ
MahZ

Reputation: 21

No 'Access-Control-Allow-Origin' header is present on the requested resource error in fetch API django

I'm trying to fetch some data from an API. It works and my data is sent to the server but I am getting the following error message that not allow me to continue:

Access to fetch at 'http://192.168.80.11:8000/upload/5bc4206e3ff2286d24c58899/' from origin 'http://localhost:8000' has been blocked by CORS policy:

No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I know that this is because I am trying to fetch that data from within my localhost and the solution should be using CORS. But how can I set Access-Control-Allow-Origin in the response header? I use Django. And this is setting file on server:

INSTALLED_APPS = (
    ...
    'corsheaders',
    ...
)

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

]
CORS_ORIGINE_ALLOW_ALL= True
CORS_ALLOW_CREDENTIALS = True
#CORS_ORIGINE_ALLOW_ALL= False
CORS_ORIGINE_WHITELIST=(
    'http//:192.168.20.29:8000',
    'http//:192.168.20.30:8000',
    'http//:127.0.0.1:8000',
)

Upvotes: 1

Views: 508

Answers (1)

Stephen
Stephen

Reputation: 1148

Did you add this to your installed apps?

INSTALLED_APPS = (
    ...
    'corsheaders',
    ...
)

UPDATE

CORS_ORIGIN_ALLOW_ALL not CORS_ORIGINE_ALLOW_ALL

CORS_ORIGIN_WHITELIST not CORS_ORIGINE_WHITELIST

Upvotes: 0

Related Questions