AWS S3 静态站点 CORS jquery ajax POST 到 API Gateway

Posted 2023-03-03

【中文标题】AWS S3 静态站点 CORS jquery ajax POST 到 API Gateway

【英文标题】：AWS S3 static site CORS jquery ajax POST to API Gateway

【发布时间】：2018-03-22 06:34:32

【问题描述】：

我们有一个托管在 s3 上的静态网站。 从页面中，我们将 jquery ajax 发布到 AWS api 网关/lambda 函数。 我不确定 OPTIONS 是如何工作的，但是当我们启用“chrome 允许跨源插件”时，一切正常（我们得到 JSON 响应）， 当插件被禁用时，我们收到错误“请求标头字段 Access-Control-Allow-Origin 在预检响应中被 Access-Control-Allow-Headers 不允许” 是否可以在没有插件的情况下进行 POST 并获得成功的响应 我们还在 API 网关上启用了 CORS。

这里是 AJAX POST

$.ajax(
type: 'POST',
url: API_URL,
data: JSON.stringify(inputdata),
dataType: 'json',
 beforeSend: function(xhr) 
xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
xhr.setRequestHeader("Access-Control-Allow-Methods", "OPTIONS,POST");
xhr.setRequestHeader("Access-Control-Allow-Headers", "X-Requested-With,Access-Control-Allow-Headers,Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token");
xhr.setRequestHeader("Content-Type", "application/json");
 //xhr.setRequestHeader("origin", "http://evil.com/");
,
/*
headers: 

        'Access-Control-Allow-Headers':'Access-Control-Allow-Headers,Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token',
        'Access-Control-Allow-Origin' : '*',
        'Access-Control-Allow-Methods' : 'OPTIONS,POST',
        'Access-Control-Allow-Credentials' : true,
        'Content-Type': 'application/json; charset=utf-8'
,*/
crossDomain: true,
success: function (data) getdatasuccess(data),
error: function(data)
console.log("error = "+JSON.stringify(data));

);

启用“允许跨源插件”插件时的响应标头

:authority:64j2k6w2dc.execute-api.us-east-1.amazonaws.com :method:OPTIONS ：路径：/产品 :scheme:https 接受：/ 接受编码：gzip，放气，br 接受语言:en-US,en;q=0.8 访问控制请求标头：访问控制允许标头、访问控制允许方法、访问控制允许来源、内容类型 访问控制请求方法：POST 来源：http://evil.com/ 用户代理：Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (Khtml, like Gecko) Chrome/61.0.3163.100 Safari/537.36

禁用“允许跨源插件”插件时的响应标头

:authority:64j2k6w2dc.execute-api.us-east-1.amazonaws.com :method:OPTIONS ：路径：/产品 :scheme:https 接受：/ 接受编码：gzip，放气，br 接受语言:en-US,en;q=0.8 访问控制请求标头：访问控制允许标头、访问控制允许方法、访问控制允许来源、内容类型 访问控制请求方法：POST 来源：https://s3.amazonaws.com 推荐人：https://s3.amazonaws.com/mysitetest/htmlpage2.html 用户代理：Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36

【问题讨论】：

尝试在 ajax 请求中设置这些标头会给自己带来更多问题。

把它们都拿出来了，但这并没有帮助。

【参考方案1】：

它对我有用：

API 网关 > 方法选项 > 集成响应 > 标头映射：

Access-Control-Allow-Headers : 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token,X-XSRF-TOKEN ,Access-Control-Allow-Headers,Access-Control-Allow-Origin'

访问控制允许方法：'POST，GET，OPTIONS'

访问控制允许来源：'*'

并从客户端删除不必要的标头！

【讨论】：

我现在已经启用了 API Gateway > Method OPTIONS > Integration Response > Header Mappings 上的确切设置 不幸的是，我无法在此处粘贴屏幕截图。这是我的 S3 页面的链接s3.amazonaws.com/anothercoderiot/htmlpage2.html 再次输入设备 ID 64-5A-04-A6-06-6F 如果您启用 CORS “Allow-Control-Allow-Origin”插件，该页面将正常工作。提前致谢

您的 API Gateway 是否与 AWS Lambda Function 集成？