代码之家 › 专栏 › 技术社区 › Namah

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

api-key post api ajax jquery

1

Namah · 技术社区 · 9 年前

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部分中添加了标题,但仍然不起作用。请帮忙。

1 回复 | 直到 9 年前

1

4

Phil P 8 年前

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

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

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

3) 在步骤5中,Allow Access Control标头应具有X-Api-Key,只需将其更改为小写即可。

从这些步骤来看,启用CORS似乎是至关重要的,只要您使请求头keyname保持一致,x-api-key的小写字母就没有那么重要。最后,整个过程应该在您已经在API网关控制台中创建了使用计划和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');
    },
});