Question

我在Django中创建了一个API，并在桌面上为angular和html创建了一些普通文件。我喜欢用API输出填充角度应用程序。请求到达网络服务器，但后来我收到错误。

我收到以下错误：No＆＃39; Access-Control-Allow-Origin＆＃39;标头出现在请求的资源上。起源＆＃39; null＆＃39;因此不允许访问。

所以我需要添加＆＃34; Access-Control-Allow-Origin＆＃34; =真或什么，但在哪里以及如何？我现在已经阅读了很多问题，尝试了不同的地方以及如何添加，但我无法弄明白。有人可以帮我这个吗？提前完成。

views.py

def myjson(request):
    data = Dish.objects.all()
    #data = {'string':'test', 'twee':'pollo'}
    #data = serializers.serialize('json', data)
    data = json.dumps( [{'name': o.name, 'description': o.description, 'persons': o.persons} for o in data])
    return HttpResponse(json.dumps(data),mimetype="application/json")

的script.js

var myApp = angular.module('myApp', []);

myApp.controller('UserCtrl', ['$scope', '$http', function ($scope, $http) {

  $scope.dish = {};

  //$scope.dish = [{"persons": 4, "name": "Pasta Bolognese", "description": "Pasta met een saus op tomaten basis"}, {"persons": 2, "name": "Pasta Carbonara", "description": "gdsdgfgds"}, {"persons": 4, "name": "Pizzadeeg voor Big Green Egg", "description": "sdgfgfdgfd"}, {"persons": 2, "name": "Low and Slow Ribs", "description": "fdsfsdsfdfsddf"}];

  //$scope.dish = '';

  $http({
    method: 'GET',
    url: 'http://127.0.0.1:8000/food/myjson/'
  })
  .success(function (data) {
    // See here, we are now assigning this username
    // to our existing model!
    $scope.dish = data;
  })
  .error(function (data, status, headers, config) {

  });
}]);

HTML

<!DOCTYPE html>
<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-route.js"></script>
<script src="script.js"></script>
<script type="text/javascript">
</script>

</head>

<body>
<div ng-app="myApp">
    <div ng-controller="UserCtrl">

                {{ dish }} 
    </div>
</div>
</body>

</html>

Answer 1

这是一个CORS (cross-origin resource sharing)问题。当您尝试命中位于不同域上的端点时，会发生这种情况。如果你的后端有一个REST API，那么这是有意义的。

您的API需要设置标头以允许来自各种来源的请求。我们必须允许Access-Control-Allow-Origin允许localhost用于我们的开发环境。我发现在Angular中，对于每个请求，您还需要发送withCredentials: true。

  $http({withCredentials: true, method: 'GET', url: http://127.0.0.1:8000/food/myjson/' })
  .success(function (data) {
      // See here, we are now assigning this username
      // to our existing model!
      $scope.dish = data;
  })
  .error(function (data, status, headers, config) {

  });

}）;

有些消息称，您还需要在客户端设置标头以及每个请求。我不得不这样做。但包括它可能没什么坏处：

headers: {'Content-Type': 'application/json; charset=utf-8'}

请求的资源上不存在“Access-Control-Allow-Origin”标头。因此不允许原点'null'访问。

1 个答案: