Axios blocked by CORS policy with Django REST Framework

Question

I'm trying to make requests to my API(Django REST Framework) using Axios but I get the following error:

Access to XMLHttpRequest at 'http://trvl.hopto.org:8000/api/airports/MSP/routes' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Even tough when you use cUrl to check:

curl -I -X GET   -H "Origin: http://localhost:3000"   -H 'Access-Control-Request-Method: GET'   http://trvl.hopto.org:8000/api/airports/MSP/routes 2>&1 | grep 'Access-Control-Allow-Origin'
Response: Access-Control-Allow-Origin: *

Full response from cUrl Options:
OPTIONS request: curl -I -X OPTIONS   -H "Origin: http://localhost:3000"   -H 'Access-Control-Request-Method: GET'   http://trvl.hopto.org:8000/api/airports/MSP/routes
HTTP/1.1 200 OK
Date: Wed, 27 Mar 2019 10:58:01 GMT
Server: WSGIServer/0.2 CPython/3.6.8
Content-Type: text/html; charset=utf-8
Content-Length: 0
Vary: Origin
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: accept, accept-encoding, authorization, content-type, dnt, origin, user-agent, x-csrftoken, x-requested-with
Access-Control-Allow-Methods: DELETE, GET, OPTIONS, PATCH, POST, PUT
Access-Control-Max-Age: 86400

When using Axios:

let url = 'http://A.hopto.org:8000/api/airports/MSP/routes';

axios.get(url)
      .catch((err) => {
        console.error(err);
      })
      .then((response, ) => {
        console.log(response);
      });


Response:
Access to XMLHttpRequest at 'http://API.hopto.org:8000/api/airports/MSP/routes' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

The problem is the API has the CORS enabled but I cannot make it work with Axios and React in my WebApp.

UPDATE:

Here is my Django settings.py I'm using the https://github.com/ottoyiu/django-cors-headers module.

**settings.py**

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = ['*']

# Application definition

INSTALLED_APPS = [
    'corsheaders',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'trvl',
    'rest_framework',
    'coreapi',
    'django_filters',
]

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

CORS_ORIGIN_ALLOW_ALL = True

Have you checked to make sure django has your request URL in the allowed origins? — wnamen, Mar 26 '19 at 22:00
Double check: Is the response header set for a GET? The Curl response is for an OPTIONS request — Geert-Jan, Mar 26 '19 at 22:14
Is the origin page https or http? Your code works fine from an HTTP page, but fails from HTTPS — Jaromanda X, Mar 26 '19 at 22:33
I'm using the * wild card to allow all origins and the GET also return the Allow-Origins * header, the origin page is also HTTP — murthaA, Mar 27 '19 at 11:05
I found an answer that worked: https://stackoverflow.com/questions/55108410/django-rest-framework-cors-blocking-xmlhttprequest?rq=1 — murthaA, Mar 27 '19 at 11:32

R.jan · Answer 1 · 2020-06-30T16:15:59.667

12

This is because you forgot '/' at the end of your url.

let url = 'http://A.hopto.org:8000/api/airports/MSP/routes/';

edited Jun 30 '20 at 16:15

answered Jun 01 '20 at 15:39

R.jan

153
1
7

Can you add an explanation on why this work? im really curious – KuhakuPixel May 25 '22 at 12:49

score 0 · Answer 2 · answered Mar 27 '19 at 00:00

0

On your back end code you need to add add http://localhost:3000 as part of the response header for the field Access-Control-Allow-Origin

Also make sure your response has this field Access-Control-Allow-Methods include GET

You mention that your backend API code has CORS enabled. If the above doesn't work can you update your post to include how you have it set up?

answered Mar 27 '19 at 00:00

CAMD_3441

2,514
2
23
38

I'm using the wild card * to allow all origins and I'll try adding the GET to allow methods, I just updated the post with my Django settings.py and added the entire OPTIONS response from the cURL – murthaA Mar 27 '19 at 10:58

score 0 · Answer 3 · answered Aug 08 '20 at 18:27

0

I needed to add the http:// prefix to my localhost:8000 url

answered Aug 08 '20 at 18:27

smoquet

321
3
11

Axios blocked by CORS policy with Django REST Framework

3 Answers3

Linked