从 HTML 网站超链接或图片到 API 网关端点的 HTTP POST答案

【问题标题】：HTTP POST to API Gateway endpoint from HTML Website Hyperlinks or Pictures从 HTML 网站超链接或图片到 API 网关端点的 HTTP POST
【发布时间】：2019-11-13 14:16:15
【问题描述】：

我正在建立一个简单的自助式静态网站，您可以在其中单击某些元素（图片或下面的超链接），它会使用 jQuery 向 AWS API Gateway Endpoint 发起 HTTP POST 调用一些其他后端服务（Lambda、服务 API 等）。

它不需要任何特殊的东西，只需一个带有空主体的简单 POST，工作流就会继续调用服务，它们不需要或不需要输入。

也就是说，我没有运气，我尝试在 API Gateway API 的实际 URL 中包含 href 并返回 {"message":"Missing Authentication Token"} 这是一个已知行为，使用 Postman 和 API Gateway 测试进行测试套件返回 200 并按预期运行，因此这不是授权或其他设置的问题。

我也尝试了下面的变体

$("button").click(function(){
  $.post("https://blahblah.execute-api.regionhere.amazonaws.com/test",
  {},
  function(data, status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

它也返回了{"message":"Missing Authentication Token"}，所以我认为它根本没有执行 HTTP POST，其行为类似于单击超链接。有没有更好的方法，特别是考虑到单击 HTML 中的图片或其他元素会调用此 POST 的要求？

【问题讨论】：

我怀疑您看到的问题是由于浏览器在尝试从您的代码发出 POST 请求之前执行了 CORS 预检 OPTIONS 请求，并且预检失败，因为服务器正在等待对 OPTIONS 进行身份验证要求。但是您的浏览器不会在 OPTIONS 请求中发送任何身份验证凭据（无论您是否将身份验证凭据添加到 POST 请求中，都不会发送）。而且我认为浏览器进行预检的原因是您的 jQuery 调用将 X-Requested-With 请求标头添加到请求中，而 jQuery 没有选项来抑制它
所以您的 OPTIONS 是 (1) 将服务器配置为不需要对 OPTIONS 请求进行身份验证，而是使用适当的 CORS 标头对 OPTIONS 进行 200 OK 响应，或者 (2) 不需要使用 jQuery .post() 而是使用 fetch API，如下所示： fetch(“ blahblah.execute-api.regionhere.amazonaws.com/test”, , {method: "POST"}).then(response => response.text).then(data => console .log（数据））`。 fetch API 不会将 X-Requested-With 标头添加到请求中（也不会添加任何其他标头），因此 fetch 调用不会触发浏览器执行预检。
@sideshowbarker 我已经放弃了所有授权要求（因为这将托管在 S3 上，并使用适用于 Cognito 应用程序的适当条件存储桶策略 [这是它自己的噩梦]）我想我可以取消它目前。无论如何，我仍然遇到这个问题，而且我对 jQuery 的了解还不够，无法明确地说 OPTIONS 让我很痛苦。我来自网关的痕迹是基本的呼叫者 IP 和 404。我现在正在查看fetch developers.google.com/web/updates/2015/03/…
@sideshowbarker 我将使用 Fetch，现在的问题是如何链接我的 HTML DIV 中的任何元素（图片、超链接等）以有效地调用 fetch() 操作点击？看起来语法很简单，可以实现一个空的正文和正确的内容

标签： jquery html xmlhttprequest aws-api-gateway

【解决方案1】：

我最终选择了 HTML formmethod 属性，如此处所述 (https://www.w3schools.com/tags/att_button_formmethod.asp)

---html stuff---
<form action="https://blah.execute-api.awsregion.amazonaws.com/test" method="post" target="_blank">
  <button class="deploy_button" type="submit" formmethod="post">Click to Deploy</button>
</form>
---more html stuff---

不必弄乱 CORS，响应正文在另一个选项卡中打开，这是一个很好的提示，让最终用户不要继续粉碎它，也避免我不得不为 onClick() 做一些工作一个弹出框。

【讨论】：