如何配置 S3 存储桶以允许 POST 到 API 网关而不会出现 405 错误

Question

我有一个托管在 AWS S3 上的静态网站。 可以从以下任一网址访问该网站： https : //s3.amazonaws.com/example-bucket-name-to-avoid-spam/index.html或http://example-bucket-name-to-avoid-spam。 s3-website-us-east-1.amazonaws.com/

当用户完成表单和页面上的验证码并按下提交时，将触发以下 JavaScript：

 <script> // Replace the YOUR_API_ENDPOINT_URL with yours // It should look something like this: // https://qw324asdasd.execute-api.us-east-1.amazonaws.com/dev/api/sendSms const API_ENDPOINT = 'https://fak3ur1.execute-api.us-east-1.amazonaws.com/dev/api/sendSms'; var messageDiv = document.getElementById('error-message') // Handle public api call document.getElementById('send-text').addEventListener('click', function () { const captchtaResponse = grecaptcha.getResponse() || false const textMessage = document.getElementById('message').value const phoneNumber = document.getElementById('phone-number').value if (!textMessage) { messageDiv.innerHTML = 'Remember to enter a message!' return false } if (!phoneNumber) { messageDiv.innerHTML = 'Don\\'t forget to enter a phone number!' return false } if (!captchtaResponse) { messageDiv.innerHTML = 'Complete the Captcha please!' return false } const data = JSON.stringify({ to: phoneNumber, message: textMessage, captcha: captchtaResponse }) // post to API with native browser Fetch const getdata = fetch(API_ENDPOINT, { headers: { "Content-type": "application/json" }, method: 'POST', body: data, mode: 'cors', cache: false, }); getdata.then(function(response) { response.json().then(function(data) { console.log('Response:', data); const body = JSON.parse(data.body); messageDiv.textContent = ''; messageDiv.textContent = (body && body.message) ? body.message : ''; }); }).catch(function(err) { console.log(err) }); }); </script>

这成功地将 POST 发送到 AWS API 网关，该网关正确处理请求并将带有 Twilio 的文本发送到所需的电话号码。

我还在 Postman 中确认 API Gateway/Lambda 响应本身正确返回：

{
    "statusCode": 200,
    "headers": {
        "Access-Control-Allow-Origin": "*"
    },
    "body": "{\"message\":\"Text message successfully sent!\",\"data\":{\"dateCreated\":\"2017-07-06T16:49:00.000Z\",\"dateUpdated\":\"2017-07-06T16:49:00.000Z\",\"from\":\"+13334445566\",\"body\":\"Sent from your Twilio trial account - test 5 with postman - looking at Lambda logs\"}}"
}

问题发生在 POST 被（大概）发送到 API Gateway 之后。 当在上面的非 https url 上时，静态站点重定向到带有此消息的错误页面：

405 Method Not Allowed

Code: MethodNotAllowed
Message: The specified method is not allowed against this resource.
Method: POST
ResourceType: OBJECT
RequestId: IDSTRING123
HostId: Longhostidthing1237ygausdhasdgylh231ctidasd=

这对于 https 网址：

<Error>
<Code>MethodNotAllowed</Code>
<Message>
The specified method is not allowed against this resource.
</Message>
<Method>POST</Method>
<ResourceType>OBJECT</ResourceType>
<RequestId>IDSTRING123</RequestId>
<HostId>
Longhostidthing1237ygausdhasdgylh231ctidasd=
</HostId>
</Error>

最初我认为这是 CORS 问题，但我已经多次检查并重新检查存储桶上的 CORS 策略非常宽松：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <MaxAgeSeconds>0</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>0</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

我也摆弄过几次，以确认我尽可能宽容。

最后，我在 Chrome 中尝试了这种隐身模式，在单独的配置文件中清除了 cookie 和所有浏览数据，并且上述所有内容都带有一个从浏览器端禁用 CORS 的插件。 这些尝试似乎都不能解决我的问题。

有什么想法吗？

Answer 1

马克 B 是正确的。

“听起来您正在通过 JavaScript 向 API Gateway 发布一些内容，但随后也向 S3 发布了相同的内容？我猜您需要简单地防止发生默认的表单发布操作，因为您是通过 javascript 处理它的。”

编辑：对此最简单的解决方法是更改​​此行：

document.getElementById('send-text').addEventListener('click', function () {

对此：

document.getElementById('send-text').addEventListener('click', function (event) {

并在后续行调用event.preventDefault()以防止默认代码运行并触发发布请求。