对 AWS API Gateway 的 Ajax 请求无法解析 json 响应答案

【问题标题】：Ajax Request to AWS API Gateway can not parse json response对 AWS API Gateway 的 Ajax 请求无法解析 json 响应
【发布时间】：2016-12-14 23:26:26
【问题描述】：

我在这里测试代码： http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax_get

代码如下：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
var processJSON =  function(data, textStatus, xhr) {
       alert(xhr.status);
    }
// for whatever reason, the following URL is not working any more, so you won't be able to test it anymore.
  var myURL='https://ckeqt3eoea.execute-api.us-east-1.amazonaws.com/pettest/test?name=223';
//  var myURL="https://jsonplaceholder.typicode.com/users"

    $("button").click(function(){
        $.ajax({
          url: myURL,
          dataType: "json",
          contentType: 'application/json',
          success: processJSON
        });


    });
});
</script>
</head>
<body>

<button>Send Request</button>

</body>
</html>

如代码所示，我正在尝试解析来自此 URL 的响应： https://ckeqt3eoea.execute-api.us-east-1.amazonaws.com/pettest/test?name=223

你可以直接去那个网址，发现AWS-API-Gateway的回复很简单：

{
 "cc":"dd",
 "name":"ee"
}

我能够使用上面的 javascript 来解析来自其他来源的其他 json 响应。但我正在努力解析来自AWS-API-Gateway 的上述回复。如果您取消注释 var myURL 的第二行，您将看到该代码确实适用于其他 URL。

==========

针对现有答案：

我尝试了json 和jsonp。两者都适用于其他 URL（包括我评论的那个）。但两者都不适用于 AWS Gateway API。
我还更新了代码以使用命名函数。但同样，它适用于其他 URL，但不适用于 AWS URL。
我在 Firefox 和 Safari 上对其进行了测试。

【问题讨论】：

您的 API 当前可能未配置为支持 CORS，这可以解释为什么直接点击 URL 会将 JSON 打印到浏览器，但从另一个客户端应用程序向服务器发出请求会拒绝您的请求这意味着您在 Data 对象中一无所获。在 AWS 中确保您将 API 设置为接受 CORS

标签： javascript json ajax aws-lambda aws-api-gateway

【解决方案1】：

这是数据类型。你告诉 jQuery 期待 jsonp 回调。您正在寻找的是 dataType: "json"。

更新

我刚刚测试了您的代码。问题是您的 pettest/test 资源中没有定义 OPTIONS 方法。使用 API Gateway 控制台，打开测试资源（假设 pettest 是阶段，测试是资源），然后使用“操作”下拉按钮启用 CORS。这将自动创建 OPTIONS 方法并在您的 GET 方法中设置所需的标头。

【讨论】：

我尝试了jsonp 和json。两者都适用于我尝试过的任何其他 URL。但两者都不适用于 AWS 网关 API 响应。
我刚刚测试了你的代码。问题是您的 pettest/test 资源中没有定义 OPTIONS 方法。使用 API Gateway 控制台，打开测试资源（假设 pettest 是阶段，测试是资源），然后使用“操作”下拉按钮启用 CORS。这将自动创建 OPTIONS 方法并在您的 GET 方法中设置所需的标头。
谢谢，现在可以使用了。您可以将上述回复添加到原始答案中吗？我想选择它作为正确答案。

【解决方案2】：

使用您的 API 为我工作。可能没关系，但我没有使用“resp”作为变量标签，而是使用了“数据”。

另外，调用命名函数而不是内联函数

    function processJSON(data) {
      alert(data.name);
    }

          dataType: "json",
          contentType: 'application/json',

【讨论】：

它仍然不适合我。同样，您的修改和我的原始代码适用于我尝试过的任何其他 URL，但 AWS URL 除外。（上面代码示例中注释了其他网址之一// var myURL）
我打电话给你的网址。当您从浏览器点击 URL 时，您是否获得了预期的 JSON？试试这个：alert(JSON.stringify(data, null, 4));