Запросы между источниками Запросы AJAX к AWS S3 иногда приводят к ошибке CORS
Мне нужно получить некоторые общедоступные файлы с S3.
Это моя конфигурация S3 CORS:
<?xml version = "1.0" encoding = "UTF-8"?>
<CORSConfiguration xmlns = "http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
И вот мой JS-код:
const response = await fetch(url, {
mode: 'cors',
});
const blob = await response.blob();
Это работает, но не всегда. Иногда в консоли появляется следующая ошибка:
Access to XMLHttpRequest at 'https://my-bycketuel/file.jpg' from origin 'https://my.host' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Но после того, как я перезагружаю страницу (иногда несколько раз, иногда только один раз), ошибка исчезает, и я могу прочитать объект ответа.
Другой рекомендуемый способ — использовать обратный прокси-сервер для решения проблемы.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Кажется, вам не хватает
<AllowedMethod>Head</AllowedMethod>
в вашем конфигурационном файле.
Я ожидаю, что это причина, по которой у вас возникли проблемы.
Убедитесь, что в разрешенных методах Http вы выбрали Get, Head, Options, а также включите методы Access-Control-Allow-Methods, Access-Control-Allow-Origin и Origin в свой белый список.
Попробуй это!
Удачи
Я добавил <AllowedMethod>HEAD</AllowedMethod>, но проблема не исчезла. Но самое странное для меня то, что иногда это работает, иногда нет, и я не могу найти для этого никакой причины или правила.
Вы проверили свой белый список?
Какой белый список вы имеете в виду? Я уже нашел, что вызывает проблему. Это как-то связано с кешированием: stackoverflow.com/questions/55158189/…
ОП здесь.
Я смотрел на успешные и неудачные запросы в инструментах разработчика Chrome. Я обнаружил, что неудачные запросы имеют код состояния: 200 OK (from disk cache), когда успешные запросы имеют код состояния: 200 OK
Когда я отключаю кеширование с помощью cache: 'no-cache', проблема исчезает.
const response = await fetch(url, {
method: 'GET',
mode: 'cors',
cache: 'no-cache',
headers: {
Origin: window.location.origin,
},
});
Я до сих пор не понимаю, почему кешированный запрос может страдать от проблем с CORS, но, по крайней мере, я нашел решение или, скорее, обходной путь.
// Обновлено:
Я обнаружил, что я не одинок: Кэшированный ответ без CORS конфликтует с новым запросом CORS
Это ошибка в реализации CORS S3. S3 не может установить Vary: Origin для ответов на запросы, отличные от CORS, даже если в корзине включен CORS... поэтому Chrome предполагает, что он может повторно использовать кешированный ответ в контексте CORS, но слишком поздно обнаруживает, что он не будет работать. , потому что в кэшированном ответе не хватает Access-Control-Allow-Origin ... serverfault.com/a/856948/153161
Вам нужно внести {мой-bycketuel / *} в белый список на {мой.хост}. И таким образом вопрос будет решен для вас навсегда. Это проблема кросс-платформенного доступа. Должно быть легко.