Retrieve data from API REST Django and Angular

Question

I'm trying to retrieve the json from the rest api set up using Django.

This data is currently only hosted on: http://127.0.0.1:8000/xyz

When I try to retrieve it using

 $http({
            method: 'GET',
            url: 'http://127.0.0.1:8000/xyz',
 })

I get an error that is:

XMLHttpRequest cannot load http://127.0.0.1:8000/xyz . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://127.0.0.1:8080 ' is therefore not allowed access.

Can someone tell me a way of dealing with this, please?

Thanks!

Here's my Django settings folder:

INSTALLED_APPS = (
    'student',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'corsheaders'
)

MIDDLEWARE_CLASSES = (
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.auth.middleware.SessionAuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware'
)

CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
CORS_URLS_REGEX = r'^/api.*$'
CORS_ORIGIN_WHITELIST = (
    'mydomain',
    'localhost:3000',
    'http://127.0.0.1:8000/'
)

Answer 1

Look into using django-cors-headers to have Django return the proper headers. You can then create a whitelist for your site ( http://127.0.0.1:8080 for development and whatever your final domain for production)

I use the following on my settings for a similar setup:

INSTALLED_APPS += ('corsheaders',)
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
CORS_URLS_REGEX = r'^/api.*$'
CORS_ORIGIN_WHITELIST = (
    'mydomain',
    'localhost:3000',
)

You may also need to add the following to your Angular project:

$http.defaults.useXDomain = true;

[UPDATE]

See this blog for more details

Answer 2

Apart from the changes in settings.py, please try to add a slash at the end of the url you are calling

    $http({
                method: 'GET',
-                url: 'http://127.0.0.1:8000/xyz',
+                url: 'http://127.0.0.1:8000/xyz/',
     })