带有签名 cookie 的 AWS Cloudfront POST 请求

Question

我在使用自定义策略使用签名 cookie 向云端发送 POST 请求时遇到问题。

最近我更改了域。在此之前，GET 和 POST 请求都运行良好。现在 POST 请求不起作用。

我想我设置的一切都和以前一样。

具体情况是这样的。

1.GET 请求从https://myexampledomain.com 到 Cloudfront（域：https://cdn.myexampledomain.com）仍然可以正常工作。

2.我使用 S3 作为源，直接对 S3 的 GET/POST 请求可以正常工作。没有 CORS 问题。

3.但是，对 Cloudfront 的预检请求失败。

我在控制台中遇到了这个错误。

No 'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'https://myexampledomain.com is therefore not allowed 
access. The response had HTTP status code 403.

更有趣的是，当我在 Chrome 开发人员工具中单击“重放 XHR”时，POST 请求与签名的 Cookie 一起工作，并获得 201 Created 响应。这让我抓狂。

我尝试了 CURL 和 POSTMAN 来测试 POST 请求，并且都按预期成功运行。这不是 Chrome 浏览器的问题。 Safari、Firefox 也是如此。

4. 我正在将 AngularJS 用于客户端应用程序。我怀疑有角度，但直接对 S3 的 GET/POST 请求很好。 （以及对 Cloudfront 的 GET 请求） POST 请求正文和 cookie 是这样的。

Amazon S3 CORS 如下所示。

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

这是我的自定义政策。 expireTime 设置正确。

{
    "Statement": [
      {
        "Condition":{
          "DateLessThan":{"AWS:EpochTime":expireTime}
        }
      }
    ]
}

和云端行为设置

我花了两天时间来解决这个问题。任何小的帮助将不胜感激。

Answer 1

您可以在 OPTIONS 响应中看到未设置 CORS 标头。那应该是你的第一个指针。

然后查看您的 S3 配置，您可以看到您没有为 OPTIONS 请求设置 CORS 标头。

所以添加

<AllowedMethod>OPTIONS</AllowedMethod>

到你的配置，结果：

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

在您的屏幕截图中，您可以看到在云端您已经启用了 OPTIONS，所以它现在应该可以工作了。

我正在回复这个问题，因为我在使用 ng-file-upload 时遇到了类似的问题，没有使用 OPTIONS 方法发送 cookie，所以我的飞行前抛出了未经授权的错误。当您修复配置时，如果仍然出现错误，请您发布，以便我知道问题可能出在哪里？