如何使用 Jquery AJAX 将 API 密钥作为请求标头发布到 API 网关

Question

我需要将 json 数据发布到受 API 密钥保护的 AWS API 网关。当我尝试在 Postman 中添加 x-api-key 标头并发出请求时，POST 工作。但是，我想对 Jquery 代码做同样的事情。如何在 JQuery 中添加这个 x-api-key 标头。这是我的代码，

var myJSON = JSON.stringify(obj);

    $.ajax({
       type: "POST",
       url:  "<aws-url>" ,
       data: myJSON,
       crossDomain : true,
       dataType: 'json',
       beforeSend: function(xhr){xhr.setRequestHeader("X-Api-Key","<value>");},
       headers :{
                'Content-Type':'application/x-www-form-urlencoded',
                //'Authorization':'<value>'
                },
       success: function(result) {
            console.log("ho gaya");
       }
    });

如您所见，我尝试在标题部分添加“Authorization”、“auth-key”、“AUTH-KEY”、“X-Api-Key”、“x-api-key”。我还在 beforeSend 部分中添加了标题，但它再次不起作用。请帮忙。

Answer 1

我花了太长时间才弄清楚这一点，也许这是一个不同问题的解决方案，但这个问题与我的问题最相似 - 有一个由 API 网关访问的 lambda 函数，受 x-api-key 保护，我可以通过 .NET 提交 POST 请求，但在 jquery/ajax 中失败。

1) 使用发布的相同 ajax 脚本，删除标头构造中的 beforeSend 和 Content-Type 键名和值。

2) 按照 aws 程序启用 CORS。确保将其应用于 POST/GET 函数而不是 RESOURCE:
https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html

3）在第5步，Allow-Access-Control-Headers应该有X-Api-Key，只需将其改为小写即可。

从这些步骤来看，启用 CORS 似乎很重要，只要您使请求标头键名一致，x-api-key 的小写字母就不是那么重要了。最后，这整个过程应该在您已经在 API Gateway 控制台中创建使用计划和 API 密钥之后进行。

$.ajax({
    type: "POST",
    url: <url>,
    data: <myJSON>,
    crossDomain: true,
    dataType: 'json',
    headers: {"x-api-key": <keyvalue>},
    success: function(response) {
      $('#output').html('Success');
    },
    error: function(response) {
      $('#output').html('Failure');
    },
});