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

1
votes

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',
)
1
djangocors

1 Answers

0
votes

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