使用AngularJS发送HTTP请求到另一个域

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.

Answer 1

您应该使用django-cors或可以使用JSONP，但它仅接受get请求。

Answer 2

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.

Answer 3

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);
});