Question

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

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

响应符合预期（数据显示200 OK）

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

从CORS阻止对来自源“ http://d1b89hgibifv2r.cloudfront.net”的“ https://47zb0mpexk.execute-api.eu-south-1.amazonaws.com/default/autostatistika”处的XMLHttpRequest的访问策略：对预检请求的响应未通过访问控制检查：请求的资源上不存在“ 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问题，例如：Correct S3 + Cloudfront CORS Configuration? 并做了确切的回答（和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

您需要更改配置以允许使用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-web-policy：

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

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

1 个答案: