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

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


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.


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:

<?phpfunction 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']);