0

I have an app: Django/python backend and react frontend. Both parts were separately deployed with heroku: myapp-backend.herokuapp.com and myapp-frontend.herokuapp.com. I'm trying to get data from myapp-backend:

axios
        .get("https://myapp-backend.herokuapp.com/api/spots/1")

but get two errors:

Access to XMLHttpRequest at 'https://myapp-backend.herokuapp.com/api/spots/1' from origin 'https://myapp-frontend.herokuapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

and

Error: Network Error
    at createError (createError.js:17)
    at XMLHttpRequest.handleError (xhr.js:80)

If I run myapp-frontend locally and try get data from myapp-backend.herokuapp.com - everything is ok. Also, part of settings inside backend:

INSTALLED_APPS = [
    ...
    'corsheaders',
    'rest_framework',
    ...
]

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

ALLOWED_HOSTS = ['myapp-backend.herokuapp.com','myapp-frontend.herokuapp.com','127.0.0.1','localhost']

CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True

CORS_ORIGIN_WHITELIST = (
    'https://myapp-frontend.herokuapp.com',
    'http://localhost:3000',
)

CORS_ALLOW_METHODS = [
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
]

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

I'm a little bit stuck on this, help! ))

thunderlion
  • 21
  • 1
  • 4
  • Does this answer your question? [How can I enable CORS on Django REST Framework](https://stackoverflow.com/questions/35760943/how-can-i-enable-cors-on-django-rest-framework) – ceejayoz Jan 10 '20 at 14:20
  • No, I don't have problems with Django - when I run react-part locally (and Django with heroku) - everything works, but when I run react-part with heroku - I get errors. – thunderlion Jan 10 '20 at 14:27
  • If `myapp-backend.herokuapp.com` is your Django app, that's where the trouble lies, and that's where you need to fix the CORS config. If your Django app's CORS config is correct, it should be sending a `Access-Control-Allow-Origin` header. Check the requests in the network panel. – ceejayoz Jan 10 '20 at 14:48
  • Ok, thank you! I'll add some code from 'settings.py'- maybe it'll clarify situation. – thunderlion Jan 10 '20 at 15:04
  • At this moment everything works. I think, it was stupid mistake: .get("https://myapp-backend.herokuapp.com/api/spots/1") without slash at the end. I tried .get("https://myapp-backend.herokuapp.com/api/spots/1/") and now it's working. Locally it works without slash at the end... – thunderlion Jan 10 '20 at 15:17
  • My suspicion is the webserver is normalizing the URL, and that means a redirect, which loses your original request's Origin header. – ceejayoz Jan 10 '20 at 15:44

0 Answers0