Amazon web services CORS、S3和CloudFront配置

每当我尝试将文件发布到S3存储桶时，都会收到以下错误消息：

POST https://api.*.com/sermon 413
Access to XMLHttpRequest at 'https://api*.com/sermon' from origin 'https://*.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我的S3 ELB存储桶配置如下（对于

https://api.*.com/布道

）：

My Cloudfront的设置如下（对于

https://api.*.com/布道

）：

我还将CloudFront原点响应触发器设置为Lambda函数：

'use strict';

// If the response lacks a Vary: header, fix it in a CloudFront Origin Response trigger.

exports.handler = (event, context, callback) => {
    const response = event.Records[0].cf.response;
    const headers = response.headers;

    if (!headers['vary'])
    {
        headers['vary'] = [
            { key: 'Vary', value: 'Access-Control-Request-Headers' },
            { key: 'Vary', value: 'Access-Control-Request-Method' },
            { key: 'Vary', value: 'Origin' },
        ];
    }
    callback(null, response);
};

HTTP状态：

---

有什么我遗漏的吗？

CORS设置在S3上，但看起来在到达S3之前，您在CloudFront上遇到了HTTP 413（“负载太大”）。因此，这个问题实际上与CORS本身无关

HTTP 413通常意味着超过20 kb的CloudFront请求大小或8 kb的URL长度。注意，“请求大小”定义为包括请求头和查询字符串，但不包括请求正文

因此，第一件事是验证没有超过请求大小和URL长度限制。并且任何有效负载都在POST主体中，而不是请求头的一部分

---

还要查看上载较小的文件（<100 mb）是否可行，以排除多部分上载的任何问题。

响应的HTTP状态代码是什么？使用浏览器devtools中的网络窗格进行检查。是4xx还是5xx错误，而不是200 OK成功响应？您是否尝试过使用其他浏览器？或者尝试清除浏览器缓存/强制重新加载？我看到您正在使用，因此我应该指出，此代码是针对不同问题的解决方案，该问题仅影响

GET

和

HEAD

请求。这里的问题是，您似乎错误地使用了S3，并且它抛出了一个错误，碰巧没有CORS头。。。但CORS的错误似乎是一种干扰。要将

POST

上传发送到S3，URI总是

/

——上传的对象键在表单主体中提供。您正在发布到

/salmon

，不清楚您打算做什么。@sideshowbarker在responsePeekay中添加了HTTP状态代码，413来自后端，正如您可以看到的服务器：Ngnix，但是的，通常4xx响应不携带CORS头，lambda也不会添加CORS头，因为您无法触发4xx的lambda查看器请求/响应。