jquery - 如何使用 Jquery AJAX 将 API key 作为请求 header 发布到 API 网关

Question

我需要将 json 数据发布到受 API key 保护的 AWS API 网关。当我尝试在 Postman 中添加 x-api-key header 并发出请求时，POST 起作用了。然而，我想用 Jquery 代码做同样的事情。如何在 JQuery 中添加此 x-api-key header 。这是我的代码，

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 部分添加了 header ，但这又不起作用。请帮忙。

Answer 1

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

1) 使用发布的相同 ajax 脚本，删除 header 构造中的 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 似乎很重要，并且只要使请求 header 键名一致，x-api-key 的小写并不那么重要。最后，整个过程应该在您在 API Gateway 控制台中创建使用计划和 API key 之后进行。

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