angularjs - 带有签名 cookie 的 AWS Cloudfront POST 请求

Question

我在使用自定义策略向带有签名 cookie 的 cloudfront 发出 POST 请求时遇到问题。

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

我想我设置的每件事都和以前一样。

详细情况是这样的

1.GET 从 https://cdn.myexampledomain.com 到 Cloudfront 的请求(域:https://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 也是如此。

1. 我正在为客户端应用程序使用 AngularJS。我怀疑有 Angular 但直接对 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 header 。那应该是你的第一个指针。

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

所以添加

<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，所以我的飞行前抛出错误，它是未经授权的。当您修复您的配置时，如果您仍然遇到错误，能否请您发帖，以便我知道问题出在哪里？