I am new to AngularJS and I have the following:
- Python Flask REST services running on Google App Engine (GAE)
- AngularJS front-end running on GoDaddy
I have a REST service that I'm trying to call from my AngularJS GUI. If I access my REST service with curl, everything works just fine, as expected. So I'm confident that my REST code is not the issue. I know that I need to account for CORS so I have added this to my server side flask code:
@app.after_request
def after_request(response):
response.headers.add('Access-Control-Allow-Origin', '*')
response.headers.add('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept')
response.headers.add('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE, OPTIONS')
return response
My complete client-side code looks like:
var app = angular.module('myApp', []);
app.controller('FormCtrl', function ($scope, $http) {
app.config(['$httpProvider', function ($httpProvider) {
delete $httpProvider.defaults.headers.common['X-Requested-With'];
}]);
var formData = {
txtFirstName: "default",
txtLastName: "default",
txtEmail: "default"
};
$scope.save = function() {
formData = $scope.form;
};
$scope.submitForm = function() {
console.log("posting data....");
formData = $scope.form;
$http.post('http://myserviceURL/promo', JSON.stringify(formData)).success(function(){
console.log(formData);
});
};
});
But this keeps on generating the error of:
XMLHttpRequest cannot load http://myservicelocation/promo. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63343' is therefore not allowed access. The response had HTTP status code 500.
At this point I have no idea if my issue is client-side or server-side - I thought the code above should account for both?!?!?! Can someone please post an end-to-end solution of what the headers should look like for both the client and server side?
after_request()
call. Check your server logs and see what blew up. – Brent Washburne Apr 14 '15 at 16:57$http.post()
call is different than yourcurl
request. Use your browser to examine the actual request's contents. – Brent Washburne Apr 14 '15 at 17:04