javascript - 从 AWS S3 插入图像失败(使用 SSL)

Question

我使用 Summernote WYSIWYG 编辑器来处理 PHP 项目中的内容，但最近遇到了一个难以解决的问题。图像和其他 Assets 存储在 Amazon S3 中，并具有相当标准的存储桶策略:

{
    "Version": "2008-10-17",
    "Statement": [
        {
            "Sid": "AllowPublicRead",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::fake-bucket-name/*"
        }
    ]
}

因此，PHP 项目有一个 Controller 方法，用于处理从后端的 POST 请求上传到 S3 的操作。这有效 - 我得到了完整的 URL，并且可以手动将其粘贴到浏览器中，并且它有效。这是在 Summernote 编辑器中通过创建图像元素的函数实现的，如下所示:

$.ajax({
    data: formData,
    type: 'POST',
    url: '{{ route('admin.api.image-upload') }}',
    cache: false,
    contentType: false,
    processData: false,
    success: function (response) {
        var imageElement = document.createElement('img');
        imageElement.src = response._url;
        imageElement.setAttribute('data-id', response.id);
        imageElement.setAttribute('crossorigin', 'anonymous');
        imageElement.className = 'story-image';
        $('#editor-story').summernote('editor.insertNode', imageElement);
    }
});

现在，当在我的本地环境中测试它时 - 它有效。图像已上传，返回带有 URL 的 JSON 对象并正确插入到编辑器中。

但是当我在生产中尝试此操作(在 LetsEncrypt SSL 证书上运行)时，图像(上传到 S3)无法正确插入编辑器中:

其工作原理是，当我保存故事时，它会保存 HTML 内容并重新加载页面。现在图像可见:

现在，我认为这与使用来自另一台 SSL 主机 (S3) 的内容在一个站点上创建 DOM 元素有关，但添加 CORS 策略并不能解决问题:

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
    </CORSRule>
</CORSConfiguration>

在检查器的“网络”选项卡中，动态创建元素时收到以下请求数据:

<?xml version="1.0" encoding="UTF-8"?>
<Error><Code>AccessDenied</Code><Message>Access Denied</Message><RequestId>[requestId]</RequestId><HostId>[hostId]</HostId></Error>

Answer 1

这已经在这里讨论过: https://github.com/summernote/summernote/issues/72