Call Django API running on a server from Angular running locally

Question

I am learning with Django and Angular.

I have setup a Django API back-end on on http://serverip:8666/athletics/

I have created a small Angular application that I am running from my local machine.

The following code in my Angular app:

$scope.list_athletes = function(){

    console.log('hey');

    $http
        .get('http://serverip:8666/athletics/')
        .success(function (result) {

            console.log('success');

        })

}

generates the error:

XMLHttpRequest cannot load http://serverip:8666/athletics/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:65356' is therefore not allowed access.

What causes this error? How can I resolve it so that I can access the Django API from my local Angular app?

Bobby Russell · Accepted Answer · 2015-11-05 16:02:39Z

2

The problem you're having is related to not having CORS enabled.

As a security policy, JavaScript can't make requests across domains while running in your browser. This is meant to prevent untrusted code from executing without the user's knowledge. The workaround is to enable CORS by white listing domains.

You need to set the Access-Control-Allow-Origin response header in your responses like so:

def my_view(request):
    data = json.dumps({'foo':'bar'})
    response = HttpResponse(data)
    response['Access-Control-Allow-Origin'] = 'http://127.0.0.1:65356'
    return response

This will enable CORS for your angular app. You can even add django-cors-headers to your project to have this functionality implemented for you. This can be added to any Django response object, such as django.http.repsonse.HttpResponse. Because you appear to be using a DRF Response object, you may need to use something like

return Response(serializer.data, headers={'Access-Control-Allow-Origin': 'http://127.0.0.1:65356'})

to set your response headers.

You should also check out this site for more information on how to enable CORS in your webapp.

edited Nov 5, 2015 at 16:02

answered Nov 4, 2015 at 16:06

Bobby Russell

4752 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user1283776 Over a year ago

Where should I add that line? Is it in the Django app? I only have one response in my simple Angular app. It is "return Response(serializer.data)"

Bobby Russell Over a year ago

Looks like django-rest-framework's Response object, so you could try 'return Response(serializer.data, headers={'Access-Control-Allow-Origin': 'http: //127.0.0.1:65356/'})

user1283776 Over a year ago

That worked, thanks! (I removed the space after http: and the / after the port number.)

SuperNova · Accepted Answer · 2015-11-05 07:40:20Z

0

Have you done the settings part in settings.py

INSTALLED_APPS = (
    'corsheaders',
)
MIDDLEWARE_CLASSES = (
    'corsheaders.middleware.CorsMiddleware',
)
CORS_ORIGIN_WHITELIST = (
  'http://127.0.0.1:65356'
)

And also include CORS_ALLOW_CREDENTIALS, CORS_ALLOW_HEADERS settings

answered Nov 5, 2015 at 7:40

SuperNova

27.7k7 gold badges98 silver badges70 bronze badges

3 Comments

user1283776 Over a year ago

The previous answer worked. I have not done the settings you suggest. Are those settings an alternative solution?

SuperNova Over a year ago

yes. This is an important config you got to add in the settings to allow front end or other domains to access your Backend.

user1283776 Over a year ago

I couldn't get that to work. With your proposed method I got an error message that "XMLHttpRequest cannot load ... No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ... is therefore not allowed access.".

Collectives™ on Stack Overflow

Call Django API running on a server from Angular running locally

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related