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?

  • HTTP status code 500? That means the request failed and probably didn't run your after_request() call. Check your server logs and see what blew up. – Brent Washburne Apr 14 '15 at 16:57
  • @BrentWashburne thank you. As I said, if I use curl, the server-side code works fine. So could it be a problem with how I'm posting from the Angular file? I'm just using a simple http.post - are there better ways to try? – Unknown Coder Apr 14 '15 at 16:59
  • Yes, it sounds like your $http.post() call is different than your curl request. Use your browser to examine the actual request's contents. – Brent Washburne Apr 14 '15 at 17:04
  • in chrome you can right click on a request and get it as a curl, try that. – Paul Collingwood Apr 14 '15 at 18:33
  • @PaulCollingwood that's very interesting. Where exactly would I right-click? Like in the JavaScript console or? – Unknown Coder Apr 14 '15 at 18:35

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.