Вставить изображение из AWS S3 не удается (с SSL)

1

Я использую редактор Summernote WYSIWYG для контента в PHP-проекте, но в последнее время столкнулся с трудной проблемой. Изображения и другие активы хранятся на Amazon S3 с довольно стандартной политикой:

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

Таким образом, проект PHP имеет метод контроллера, который обрабатывает загрузку на S3, из запроса POST в бэкэнд. Это работает - я получаю полный 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);
    }
});

Теперь при тестировании в моей локальной среде это работает. Изображение загружается, объект JSON с URL-адресом возвращается и правильно вставлен в редактор.

Но когда я пробую это в процессе производства, которое выполняется на сертификатах SSL LetsEncrypt, изображение (которое загружается на S3) не может быть правильно вставлено в редактор:

Изображение 174551

Как это работает, так это то, что когда я сохраняю историю, она сохраняет содержимое HTML и перезагружает страницу. Теперь изображение видно:

Изображение 174551

Теперь я полагаю, что это связано с созданием элементов DOM на одном сайте с содержимым другого хоста SSL (S3), но добавление политики 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>
  • 0
    не должен ли метод быть PUT вместо этого? Также вам нужно использовать регионы, я думаю, docs.aws.amazon.com/general/latest/gr/rande.html
  • 0
    Вы имеете в виду PUT в конфигурации CORSC? Конечно, это запрос GET, а не обновление объекта?
Показать ещё 5 комментариев
Теги:
amazon-web-services
amazon-s3
cross-domain

1 ответ

0

Это обсуждалось здесь: https://github.com/summernote/summernote/issues/72

  • 0
    Нет, это, кажется, обсуждает, как загрузить файлы на S3 через Summernote.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню