带有签名cookie的AWS Cloudfront POST请求

Question

我使用自定义政策对带有签名Cookie的Cloudfront POST请求有疑问。

最近我改变了域名。在此之前，GET和POST请求都运行良好。现在POST请求无效。

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

细节情况是这样的。

1.从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.

更有趣的是，当我点击＆＃34;重播XHR＆＃34;在Chrome开发人员工具中，POST请求与签名的Cookie一起使用，并获得201创建的响应。这让我发疯了。

我尝试了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标头。那应该是你的第一个指针。

然后查看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>

在屏幕截图中，您可以看到在Cloudfront中已经启用了OPTIONS，因此它现在可以正常工作。

我正在修复此问题，因为我有与ng-file-upload类似的问题，而不是使用OPTIONS方法发送cookie，因此我的飞行前抛出了未经授权的错误。当您修改配置时，如果您仍然遇到错误，请发帖，以便我知道问题出在哪里？