AWS S3 存储桶 CORS 策略错误：请求的资源上不存在“Access-Control-Allow-Origin”标头

Question

我是无服务器服务的新手，主要是 aws 概念。 我正在尝试使用 AWS S3 Bucket 和 CloudFront 部署我的单页应用程序 (SPA)。 每个静态文件都正确提供，但在 SPA 中，有一些 axios.POST(...) 来自我的 API 的原始页面。 Api 配置正确，并接受来自任何人（经过测试）的请求。
现在当我尝试：

 curl -H "origin: ORIGIN_DOMAIN" -H "x-api-key: API_KEY" -v "API_URL"

响应与预期一致（数据为 200 OK）

但是当我尝试加载我的 SPA 时，浏览器会说：

从源“http://d1b89hgibifv2r.cloudfront.net”访问“https://47zb0mpexk.execute-api.eu-south-1.amazonaws.com/default/autostatistika”的 XMLHttpRequest 已被 CORS 策略阻止：响应预检请求未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。

我的 S3 存储桶 CORS 策略：

 <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> <CORSRule> <AllowedOrigin>*</AllowedOrigin> <AllowedMethod>POST</AllowedMethod> <AllowedMethod>GET</AllowedMethod> <AllowedMethod>HEAD</AllowedMethod> <AllowedHeader>*</AllowedHeader> </CORSRule> </CORSConfiguration>

我发现了一些 stackoverflow 问题，例如： 正确的 S3 + Cloudfront CORS 配置？ 并在答案中做了什么（以及在 aws 文档中）： https ://stackoverflow.com/a/52383335/9156446

请，有人可以帮我解决这个问题吗？ 谢谢。

更新：我忘记在本地机器上尝试使用远程 API 设置的 SPA，我的应用程序不起作用，即使在本地机器上也是如此。 几个小时后，我发现我的 API 仅在带有 axios.POST() 的浏览器中没有响应标题“Access-Control-Allow-Origin”：“*”。 所以问题出在 API 中，因为即使 cURL 命令有效，它也没有正确响应标头“Access-Control-Allow-Origin”（AWS Lambda + API Gateway）。 我通过在 AWS Lambda 的响应中对标头进行硬编码来解决它。 感谢@vaquar khan，感谢您的时间。

Answer 1

[
  {
    "AllowedHeaders": [
        "*"
    ],
    "AllowedMethods": [
        "POST",
        "GET",
        "PUT"
    ],
    "AllowedOrigins": [
        "*"
    ]
  }
]

在新的 S3 控制台中，CORS 配置必须是 JSON。

Answer 2

您需要更改配置以允许使用 ACL 进行公共访问并添加以下配置

cors配置：

        <?xml version="1.0" encoding="UTF-8"?>
        <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
        <CORSRule>
            <AllowedOrigin>http://www.myapp.com</AllowedOrigin>
            <AllowedMethod>GET</AllowedMethod>
            <AllowedMethod>POST</AllowedMethod>
            <AllowedMethod>PUT</AllowedMethod>
            <ExposeHeader>Accept-Ranges</ExposeHeader>
            <ExposeHeader>Content-Range</ExposeHeader>
            <ExposeHeader>Content-Encoding</ExposeHeader>
            <ExposeHeader>Content-Length</ExposeHeader>
            <ExposeHeader>Access-Control-Allow-Origin</ExposeHeader>
            <AllowedHeader>*</AllowedHeader>
        </CORSRule>
        <CORSRule>
            <AllowedOrigin>https://www.app.com</AllowedOrigin>
            <AllowedMethod>GET</AllowedMethod>
            <AllowedMethod>POST</AllowedMethod>
            <AllowedMethod>PUT</AllowedMethod>
            <ExposeHeader>Accept-Ranges</ExposeHeader>
            <ExposeHeader>Content-Range</ExposeHeader>
            <ExposeHeader>Content-Encoding</ExposeHeader>
            <ExposeHeader>Content-Length</ExposeHeader>
            <ExposeHeader>Access-Control-Allow-Origin</ExposeHeader>
            <AllowedHeader>*</AllowedHeader>
        </CORSRule>
        </CORSConfiguration>

s3-网络政策：

        {
          "Version":"2012-10-17",
          "Statement":[
            {
              "Sid":"AddPerm",
              "Effect":"Allow",
              "Principal": "*",
              "Action":["s3:GetObject"],
              "Resource":["arn:aws:s3:::dynamic-xxx-xxx-bucket/*"]
            }
          ]
        }