AJAX POST with CORS to API Gateway does not work, although can POST with CURL

Question

So I am trying to submit data to an API endpoint using a $.ajax() call. I have verified that I can POST using a curl command, in the format of the following:

curl -X POST -H "Content-Type: application/json" -d "{\"uname\":\"myusername2\",\"emailAddr\":\"[email protected]\"}" <url to my API endpoint>

That curl command returns an empty JSON response (looks like {}), and my data gets put into the DB (which is what I configured the API Gateway endpoint to do).

However, when I try to do this using a $.ajax() command, which is programmed to fire on a button being clicked after form data is filled out, I can't get it to work.

    var obj = new Object();
    obj.uname = $uname;
    obj.emailAddr = $email;
    var stringedObj = JSON.stringify(obj);
    alert("stringified: " + stringedObj);
    $.ajax({
        url: '<same url as in curl>',
        type: 'POST',
        contentType: 'application/json',
        dataType: 'json',
        data: JSON.stringify(obj),
        success: function(data) {
            alert(JSON.stringify(data));
        },
        error: function(e) {
            alert("failed" + JSON.stringify(e));
        }
    });

Whenever I run this, I can see from the first alert message that my data is properly stringified. However, I always just get an error message that looks like this:

failed{"readyState":0,"responseText":"","status":0,"statusText":"error"}

I would like to know if I can get a more detailed error response. Also, I have tried with parseData: false and crossdomain: true. Once again, it works when I use curl so I am pretty sure this is not an API Gateway configuration issue.

Thanks for any and all help!

EDIT: I learned from the comment below about the javascript console. Now I have found out that this was due to CORS not being enabled. I enabled CORS in AWS Api Gateway, waited for that to complete, then changed my request to:

    $.ajax({
        url: '<my url>',
        type: 'POST',
        data: JSON.stringify(obj),
        dataType: 'json',
        crossDomain: true,
        success: function(data) {
            alert(JSON.stringify(data));
        },
        error: function(e) {
            alert("failed" + JSON.stringify(e));
        }
    });

And I get the same response in the javascript console about needing CORS. Other threads on CORS have shown this as the example. I am wondering if I need custom headers, although I tried that with adding headers: { "Access-Control-Allow-Origin": "*" } and still got the same response from the javascript console:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://k6i6wk8487.execute-api.us-west-2.amazonaws.com/prod/comments. (Reason: CORS header 'Access-Control-Allow-Origin' missing).

Answer 1

Figured it out, I had not hit 'deploy' in AWS API Gateway after updating it to Enable CORS. Doh! Thanks to all who helped. Here is my final ajax call:

$.ajax({
                url: $invokeUrl,
                type: 'POST',
                data: JSON.stringify(obj),
                dataType: 'json',
                crossDomain: true,
                contentType: 'application/json',
                success: function(data) {
                    alert(JSON.stringify(data));
                },
                error: function(e) {
                    alert("failed" + JSON.stringify(e));

Thanks to all who helped, and let me know if you are running into this issue with API Gateway and I will try to help.