send HTTP request using AngularJS to another domain

Question

I've been developing an API using django-rest-framework.

However, when i run virtual web server on localhost and try and send a request to api i get this error

XMLHttpRequest cannot load http://127.0.0.1:8000/users?format=json. No ' Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

After a quick search i realized, that the problem is that i send request to a different domain ( different port in my situation ) and i can fix it by installing some new app. However, i don't want to do it in django, but rather by edditing the way i make a request. That's how i do it now:

Geonix.controller('mainController', function($scope, $http) {
          var config = { headers: {'Content-Type': 'application/json; charset=utf-8'}};
            $http.get('http://127.0.0.1:8000/users?format=json', config).success(function(data) {
                $scope.users = data;
            });
        });

Is there a way to get a right response without changing anything in back-end ? Note, that on actual server api and web page will be running on different ports as well, thus the problem will stay.

arcegk · Accepted Answer · 2016-09-07 21:36:52Z

2

You should use django-cors or you can use JSONP but it only accepts get requests.

answered Sep 7, 2016 at 21:36

arcegk

1,49012 silver badges15 bronze badges

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

1 Comment

serv-bot 22 Over a year ago

django-cors-headers is no longer maintained (incompatible with Django 1.10 and above). You should use django-cors-middleware instead.

serv-bot 22 · Accepted Answer · 2016-09-17 07:19:44Z

As others said, you should really look into using django-cors-middleware.

If you have proper Auth methods, or the API is supposed to be public, you can go ahead and set CORS_ORIGIN_ALLOW_ALL = True on your settings.py for a super quick solution. I'm afraid there is not much else you can do beyond that.

I once got around CORS by loading some routes in <img> tags, but it was a SUPER hacky approach for a very specific proof of concept I had to get running ASAP, when I had little control over the server. In that case, I only had to touch the routes for the server to do certain actions, and it was a Node.js server. I DO NOT recommend you try to hack around CORS, specially considering how easy it is to use django-cors-middleware.

As an added note django-cors-headers is no longer maintained. You will need to use django-cors-middleware if your Django installation is version 1.10 or above.

Emw · Accepted Answer · 2016-09-07 20:48:09Z

Angular is performing a pre-flight OPTIONS request on your Django app, but CORS is not enabled on Django. If you're able to activate CORS in Django you'll save yourself a lot of trouble.

Another option is to use JSONP, again a configuration change you would have to make in Django.

But the question is specifically about making the request without modifying Django.

In that case, pre-flight is enabled because your content type is "application/json". If you change it to "text/plain" Angular will skip the pre-flight and make the call.

Since the resulting data will be plain text, you can convert it to an object with JSON.parse():

var config = { headers: {'Content-Type': 'text/plain; charset=utf-8'}};
$http.get('http://127.0.0.1:8000/users?format=json', config).success(function(data) {
  $scope.users = JSON.parse(data);
});

Hi, unfortunately i tried changing content type to text/plain but it still results in the same error

Collectives™ on Stack Overflow

send HTTP request using AngularJS to another domain

3 Answers 3

1 Comment

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Related