CORS，S3和CloudFront配置

Question

每当我尝试将文件发布到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/sermon）：

我的Cloudfront设置如下（针对https://api.*.com/sermon）：

我还将CloudFront Origin Response触发器设置为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状态：

有什么我想念的吗？

Answer 1

CORS设置位于S3上，但看起来您在达到S3之前在CloudFront上遇到了HTTP 413（“有效载荷过大”）。因此，这个问题本身与CORS并没有真正的关系。

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

因此，第一件事是确认未超出请求大小和URL长度限制。并且所有有效载荷都在POST 正文中，而不是请求标头的一部分。

还要查看是否可以上传较小的文件（<100 mb），以排除分段上传问题。