I have created an API in Django, and some plain files from the desktop for angular and html. I like to fill an angular app with the API output. The request reaches the webserver, but then i get an error.
I get the following error: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
So i need to add "Access-Control-Allow-Origin" = True or something, but where and how? I have read many issues now, tried different things where and how to add, but i cannot figure it out. Can someone please help me with this? Thanx in advance.
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>
This is a CORS (cross-origin resource sharing) issue. It happens when you try to hit an endpoint that is on a different domain. So that'd make sense if you have a REST API for your backend.
Your API needs to set headers to allow requests from various sources. We had to allow Access-Control-Allow-Origin to allow localhost for our dev environments. I found that in Angular, with each request, you need to send withCredentials: true as well.
$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) {
});
});
Some sources say you also need to set the header on the client side as well for each request. I haven't had to do that though. But it may not hurt to include it:
headers: {'Content-Type': 'application/json; charset=utf-8'}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다