使用 CORS 到 API 网关的 AJAX POST 不起作用，但可以使用 CURL 进行 POST

Question

所以我尝试使用 $.ajax() 调用将数据提交到 API 端点。我已验证我可以使用curl 命令进行 POST，格式如下：

curl -X POST -H "Content-Type: application/json" -d "{\"uname\":\"myusername2\",\"emailAddr\":\"user2@ex.com\"}" <url to my API endpoint>

curl 命令返回一个空的 JSON 响应（看起来像 {}），我的数据被放入数据库（这是我配置 API Gateway 端点要做的事情）。

但是，当我尝试使用 $.ajax() 命令执行此操作时，该命令被编程为在填写表单数据后触发单击的按钮，但我无法使其工作。

    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));
        }
    });

每当我运行此程序时，我都可以从第一条警报消息中看到我的数据已正确字符串化。但是，我总是收到如下所示的错误消息：

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

我想知道是否可以获得更详细的错误响应。另外，我尝试过使用parseData: false 和crossdomain: true。再一次，当我使用 curl 时它可以工作，所以我很确定这不是 API 网关配置问题。

感谢您的所有帮助！

编辑：我从下面关于 javascript 控制台的评论中了解到。现在我发现这是由于未启用 CORS。我在 AWS Api Gateway 中启用了 CORS，等待它完成，然后将我的请求更改为：

    $.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));
        }
    });

我在 javascript 控制台中得到了关于需要 CORS 的相同响应。 Other threads on CORS have shown 以此为例。我想知道是否需要自定义标头，尽管我尝试添加 headers: { "Access-Control-Allow-Origin": "*" } 并且仍然从 javascript 控制台得到相同的响应：

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

您可以使用 JSONP 技术发出请求：

<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>

您可能需要调整远程服务以接受和解码 URL 中的数据参数。

另一种可能更好的方法是将您的外部 URL 作为参数包装，将 POST 数据的一部分发送到您的本地 CURL，让服务器获取其他域的响应，并将其放回来自同一域的响应中。按照你的例子：

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

Answer 2

想通了，在将 AWS API Gateway 更新为启用 CORS 后，我没有在 AWS API Gateway 中点击“部署”。嗬！感谢所有帮助过的人。这是我最后的 ajax 调用：

$.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));

感谢所有提供帮助的人，如果您在使用 API Gateway 时遇到此问题，请告诉我，我会尽力提供帮助。