Я использую Digital Ocean Spaces, но хотя я устанавливаю политику CORS, я борюсь с ошибкой:
Нет заголовка «Access-Control-Allow-Origin»на запрашиваемом ресурсе. Если непрозрачный ответ отвечает вашим потребностям, установите режим запроса 'no-cors', чтобы получить ресурс с отключенным CORS.
Моя проблема странная, похоже на русскую рулетку, я не могу понятькогда ошибка происходит, потому что она всегда выходит из ниоткуда.
Позвольте мне объяснить:
Я использую сторонний пакет, который манипулирует изображениями для аватара. Однако, когда загружается существующее изображение, это делается так:
...
if (this.initialImage && typeof this.initialImage === 'string') {
src = this.initialImage;
img = new Image();
if (!/^data:/.test(src) && !/^blob:/.test(src)) {
img.setAttribute('crossOrigin', 'anonymous');
}
img.src = src; //<----- at this point the code fails
}
...
Проблема не возникает с первым запросом!
Посмотрите на это:
Как вы можете видеть, значения для Access-Control-Allow-Origin установлены на *, как я делал в настройке CORS моего хранилища S3 наDigital Ocean:
Однако, если я перезагружаю страницу в другой раз, все начинает ломаться, и аватар не отображается из-за ошибки CORS,(Посмотрите на это, все еще получая 200)
На этой картинке выше вы видите, что сервер-работник каким-то образом возвращает эту картинку втекстовый формат. Я действительно не знаю, почему он это делает там. Поэтому я решил удалить обслуживающего работника.
Все равно, это как играть в русскую рулетку. Иногда это просто работает, иногда просто нет:
На картинке выше вы видите, что изображение загружается через кеш браузера,На следующем рисунке вы увидите, что внезапно вообще не установлено значение Access-Control-Allow-Origin.
В бэкэнде я использую Laravel,Изображения передаются через мой поддомен cdn-local.mydomain.com, который перенаправляется в Digital Ocean Spaces, как конечная точка сегмента AWS 3.
EDIT
Я выяснил, как это исправить, но это добавляет еще одиношибка также ...
Если я удаляю эту часть из кода:
img.setAttribute('crossOrigin', 'anonymous');
Все начинает работать снова, но если я загружаю изображения из примера Instagram, то я получаю ошибку:
Загрязненные полотна не могут быть экспортированы
Если я добавлю строку с crossOrigin назад, ошибка снова исчезнет, но затем я не смогу увидеть изображения с моего cdn-снова субдомен ...
Есть идеи?
Каким-то образом, если я получаю изображения, они всегда имеют значение Sec-Fetch-Mode: no-cors, однако изображения с моего поддоменов cdn всегда имеют значение Sec-Fetch-Mode: cors