AngularJS POST fails with No 'Access-Control-Allow-Origin' when using data payload object but works using query params like payload

Question

I am facing a weird issue. I am running my angularjs app in nodejs server locally which calls a POST API from my app located on Google App Engine. The API is configured with all CORS headers required as follows:

def post(self):
self.response.headers.add_header("Access-Control-Allow-Origin", "*")
self.response.headers.add_header("Access-Control-Allow-Methods", "POST,GET,PUT,DELETE,OPTIONS")
self.response.headers.add_header("Access-Control-Allow-Headers", "X-Requested-With, content-type, accept, myapp-domain")
self.response.headers["Content-Type"] = “application/json; charset=utf-8”

GET requests to the API work without issues.

POST requests to the API work but ONLY when I send the post data as a 'string of params' and NOT when post data is sent as an object which is the right way to do. Eventually I need to be able to upload pictures using this API so the first solution below might not work for me. Please help!

METHOD 1: This works:

postMessageAPI = "https://myapp-qa.appspot.com/message";

var postData = "conversationid=1c34b4f2&userid=67e80bf6&content='Hello champs! - Web App'";

var postConfig = {
    headers:  {
    "MYAPP-DOMAIN" : "myapp.bz",
    'Content-Type': 'application/json; charset=UTF-8'
    }
};

$http.post(postMessageAPI, postData, postConfig).
success(function(data){
     $log.log("POST Message API success");
}).
error(function(data, status) {
    $log.error("POST Message API FAILED. Status: "+status);
    $log.error(JSON.stringify(postData));
});

METHOD 2: This fails:

postMessageAPI = "https://myapp-qa.appspot.com/message";

var postData = ({
    'conversationid' : '1c34b4f2',
    'userid' : '67e80bf6',
    'content' : 'Hello champs! - Web App'
});

var postConfig = {
    headers:  {
    "MYAPP-DOMAIN" : "myapp.bz"
    'Content-Type': 'application/json; charset=UTF-8'
    }
};

$http.post(postMessageAPI, postData, postConfig).
success(function(data){
     $log.log("POST Message API success");
}).
error(function(data, status) {
    $log.error("POST Message API FAILED. Status: "+status);
    $log.error(JSON.stringify(postData));
});

When I use METHOD 2 it fails with the following error in the console:

XMLHttpRequest cannot load https://myapp-qa.appspot.com/message. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://0.0.0.0:8000' is therefore not allowed access.

Please let me know if you have any solution. Thanks in advance.

score 0 · Answer 1 · edited May 23 '17 at 11:59

The issue is most likely with Angular sending a pre-flight OPTIONS request to check the access headers from the server. I am not sure how OPTIONS requests are handled in your API, but I am betting these headers are not being added. I suggest installing Fiddler to monitor the actual requests to see what is going on with the headers. You may only be adding them to your POST responses.

See this answer for details on why METHOD 1 may work in this scenario, while METHOD 2 does not.

Here are some more details about pre-flight requests.

AngularJS POST fails with No 'Access-Control-Allow-Origin' when using data payload object but works using query params like payload

1 Answers1