Я использую редактор 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) не может быть правильно вставлено в редактор:
Как это работает, так это то, что когда я сохраняю историю, она сохраняет содержимое HTML и перезагружает страницу. Теперь изображение видно:
Теперь я полагаю, что это связано с созданием элементов 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>
Это обсуждалось здесь: https://github.com/summernote/summernote/issues/72