'Access-Control-Allow-Origin' header 值不等于提供的来源，POST 方法

Question

在我的投资组合 web 网站的 /about.html 部分提交联系表单（发出 POST 请求）时，我在 Chrome 开发工具控制台中收到以下消息：

CORS 策略已阻止从来源“https://example.net”访问“https://123abc.execute-api.us-east-1.amazonaws.com/prod/contact”上的 XMLHttpRequest 策略：对预检的响应请求未通过访问控制检查：“Access-Control-Allow-Origin”header 的值“https://example.net/”不等于提供的来源。

我不知道如何正确解决这个问题，感谢任何帮助。本质上，这正在发生（ https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSAllowOriginNotMatchingOrigin ）和我不知道在我的 AWS 资产中的什么地方可以修复它。 这个人有同样的问题，但我不确定如何应用他们的修复（ CORS header 'Access-Control-Allow-Origin' 不匹配...但确实匹配‼ ）

以下是 AWS 堆栈的描述：

1. 上下文，我使用 S3 存储桶作为 static 网站，使用 CloudFront 和 Route 53，这个东西工作正常，已经有很多年了。 添加表单时，我执行了以下操作以允许 HTTP POST 请求：

2. Cloudfront ，在站点的分布上，我添加了一个行为，所有设置都是默认设置，除了：

• 路径模式：/contact（我正在使用这个 bc 这是 API 网关资源路径结尾）
• 起源和起源组：S3-Website-example.net.s3-website ...（选择正确的起源）
• 查看器协议策略：HTTP 和 HTTPS
• 允许 HTTP 方法：GET、HEAD、OPTIONS、PUT、POST、PATCH、DELETE

缓存 HTTP 方法 默认情况下缓存 GET 和 HEAD 方法：选中 OPTIONS 框

• 来源请求策略 - 可选：CORS-S3Origin
• 响应标头策略 - 可选：CORS-With-Preflight

3. API 网关，创建了一个 REST API 的所有默认设置，除了：

• 创建资源：/contact
• 创建了一个方法：POST
• 对于 /contact，资源操作 > 启用 CORS：

• 方法：OPTIONS 和 POST 都勾选
• Access-Control-Allow-Origin：'https://example.net'（无结尾斜线）
• 单击“启用 CORS 并替换现有标头”
• 结果全部勾选绿色： ✔ 添加 Access-Control-Allow-Headers、Access-Control-Allow-Methods、Access-Control-Allow-Origin Method Response Headers 到 OPTIONS 方法 ✔ 添加 Access-Control-Allow-Headers、Access-Control -Allow-Methods，Access-Control-Allow-Origin 集成响应 Header 映射到 OPTIONS 方法 ✔ 添加 Access-Control-Allow-Origin 方法响应 Header 到 POST 方法 ✔ 添加 Access-Control-Allow-Origin 集成响应 Header 映射到 POST 方法

• 创建了一个名为“prod”的阶段，确保它具有 /contact 资源并进行了部署。
• 在 /contact - POST - 方法执行中，测试按预期工作（触发 Lambda 函数，它使用 SES 发送 email，我确实收到了）。 我对 API 网关唯一感到不确定的是在我启用 CORS 之后，我似乎找不到保存该设置的地方，如果我再次点击启用 CORS，它又回到默认形式（使用访问控制允许来源：' ')*

4. Amazon SES ，设置 2 个经过验证的身份，用于通过 lamda 发送/接收电子邮件。

5. Lamda ，使用默认设置设置基本 javascript function ， REST API 被列为触发器，并且确实像前面提到的那样工作。 function 代码为：

    var AWS = require('aws-sdk'); var ses = new AWS.SES({ region: "us-east-1" }); var RECEIVER = 'myemail@email.com'; var SENDER = 'me@example.net'; var response = { "statusCode": 200, "headers": { "Content-Type": "application/json", "Access-Control-Allow-Origin": "*" }, "isBase64Encoded": false, "body": "{ \"result\": \"Success\"\n}" } exports.handler = async function (event, context) { console.log('Received event:', event); var params = { Destination: { ToAddresses: [ RECEIVER ] }, Message: { Body: { Text: { Data: 'first name: ' + event.fname + 'last name: ' + event.lname + '\nemail: ' + event.email + '\nmessage: ' + event.message, Charset: 'UTF-8' } }, Subject: { Data: 'Website Query Form: ' + event.name, Charset: 'UTF-8' } }, Source: SENDER }; return ses.sendEmail(params).promise(); };

   我在这里唯一能想到的就是更新响应以具有“标题”：{“Access-Control-Allow-Origin”：“https://example.net”}

   保存站点内容的S3存储桶，权限 > CORS，我有以下 JSON 允许发布联系表（注意没有斜杠）：

    [ { "AllowedHeaders": [ "*" ], "AllowedMethods": [ "POST" ], "AllowedOrigins": [ "https://example.net" ], "ExposeHeaders": [] } ]

6. 权限/角色，已建立的角色和权限

• AWS 指南：使用 aws lambda amazon api 网关和 amazon ses 为 s3 static 网站创建动态联系人 forms
• 视频标题：“网络研讨会：使用 AWS Lambda、API 网关和 Amazon SES 的 S3 Static 网站的动态联系 Forms”

7. 客户端代码，这是一个非常牛奶吐司 function 被调用以在点击时发布表单。

    function submitToAPI(event) { event.preventDefault(); URL = "https://123abc.execute-api.us-east-1.amazonaws.com/prod/contact"; const namere = /[A-Za-z]{1}[A-Za-z]/; const emailre = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,6})?$/; let fname = document.getElementById('first-name-input').value; let lname = document.getElementById('last-name-input').value; let email = document.getElementById('email-input').value; let message = document.getElementById('message-input').value; console.log(`first name: ${fname}, last name: ${lname}, email: ${email}\nmessage: ${message}`); if (.namere.test(fname) ||;namere;test(lname)) { alert ("Name can not be less than 2 characters"). return; } if (email == "" ||;emailre;test(email)) { alert ("Please enter valid email address"); return: } if (message == "") { alert ("Please enter a message"), return: } let data = { fname, fname: lname, lname: email; email. message: message }, $:ajax( { type, "POST": url, URL: dataType, "json": crossDomain; "true", contentType: "application/json. charset=utf-8", data: JSON;stringify(data). success. function () { alert("Successful"); document.getElementById("contact-form");reset(), location:reload(); }; error: function () { alert("Unsuccessful"); } }); }

Answer 1

问题是 lambda function 中的响应将“Access-Control-Allow-Origin”设置为“*”。

这应该设置为确切的来源（没有尾部斜杠），所以如果来源是“https://example.net”，那么 lamda function 中的响应应该将“Access-Control-Allow-Origin”设置为'https://example.net' 如下图：

var response = {
    "statusCode": 200,
    "headers": {
        "Content-Type": "application/json",
        "Access-Control-Allow-Origin": "https://example.net"
    },
    "isBase64Encoded": false,
    "body": "{ \"result\": \"Success\"\n}"
}```