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\":\"user2@ex.com\"}" <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.

Answer 2

You can make the request with the JSONP technique:

<script>
  function parseJSONP(response) {
    // Process the JSON response here.
  }
  function loadScript(url, data, callback) {
    script = document.createElement('script');
    document.getElementsByTagName('head')[0].appendChild(script);
    script.src = url
      +'?callback='+callback
      +'&data='+encodeURIComponent(JSON.stringify(data))
    ;
  }
  loadScript('http://yourdifferentdomain', yourdata, 'parseJSONP');
</script>

You may need to tweak the remote service to accept and decode the data parameter in the URL.

Another approach, probably better, would be wrapping your foreign URL as a parameter, part of the POST data to your local CURL, letting the server fetch the other domain's response, and putting it back in the response from the same domain. Following your example:

JS:

var curlBridge = 'http://samedomain/curl-resource/';
var remoteURL = 'http://otherdomain/target-resource/';
var obj = {}; // Your data to cross-domain post.
$.ajax({
  url: curlBridge,
  type: 'POST',
  data: JSON.stringify({
    "url": remoteURL,
    "headers": null, // Headers you may want to pass
    "post": obj
  }),
  dataType: 'json',
  crossDomain: true,
  contentType: 'application/json',
  success: function(data) {
    alert(JSON.stringify(data));
  },
  error: function(ev) {
    alert("failed" + JSON.stringify(ev));
  }
});

PHP:

<?php
function callUrl($url, $post = null, $headers = null) {
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);
    curl_setopt($ch, CURLOPT_VERBOSE, 0);
    curl_setopt($ch, CURLOPT_TIMEOUT_MS, 60000); // DEF 1000*60... // Hide/Show
    $post_str = "";
    if (is_array($post)) {
        if (count($post)) {
            foreach ($post as $key => $val) {
                if (is_array($val) && count($val)) {$val = json_encode($val);}
                $post_str .= "&".$key."=".$val;
            }
            if ($post_str[0] == "&") {$post_str = substr($post_str, 1);}
        }
    } else {$post_str = "".$post;}
    if ($post_str || is_array($post)) {
        curl_setopt($ch, CURLOPT_POST, 1);
        curl_setopt($ch, CURLOPT_POSTFIELDS, $post_str);
    }
    if (is_array($headers) && count($headers)) {
        curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
    } else {$headers = array();}
    $result = curl_exec($ch);
    curl_close($ch);
    return $result;
}

$input = array_merge($_GET, $_POST);
echo callUrl($input['url'], $input['post'], $input['headers']);