Какие ограничения применяются к непрозрачным ответам?

Непрозрачные ответы определяются как часть Fetch API и представляют результат запроса к удаленному источнику, когда CORS не включен.

Какие практические ограничения и «подводные камни» существуют относительно того, как можно использовать непрозрачные ответы как из JavaScript, так и в качестве ресурсов на странице?

Доступ к заголовкам / телу непрозрачных ответов

Наиболее простое ограничение вокруг непрозрачных ответов является то , что вы не можете получить значимую информацию обратно от большинства свойств этого Responseкласса, как headers, или вызывать различные методы , которые составляют Bodyинтерфейс, как json()и text(). Это соответствует природе непрозрачного ответа в виде черного ящика.

Использование непрозрачных ответов в качестве ресурсов на странице

Непрозрачные ответы могут использоваться в качестве ресурса на веб-странице всякий раз, когда браузер позволяет использовать ресурсы перекрестного происхождения, отличные от CORS. Вот подмножество элементов, для которых допустимы ресурсы перекрестного происхождения, отличные от CORS, и, следовательно, непрозрачные ответы, адаптированные из документации Mozilla Developer Network :

• <script>
• <link rel="stylesheet">
• <img>, <video>И<audio>
• <object> а также <embed>
• <iframe>

Известный вариант использования, для которого непрозрачные ответы недопустимы, - это ресурсы шрифтов .

Как правило, чтобы определить, можно ли использовать непрозрачный ответ в качестве определенного типа ресурса на странице, проверьте соответствующую спецификацию. Например, спецификация HTML объясняет, что для <script>элементов могут использоваться ответы, не относящиеся к CORS (т.е. непрозрачные) , хотя и с некоторыми ограничениями для предотвращения утечки информации об ошибках.

Непрозрачные ответы и API хранилища кэша

Одна из «ловушек», с которой разработчик может столкнуться с непрозрачными ответами, связана с их использованием с API Cache Storage . Уместны две части справочной информации:

• statusСвойство непрозрачной ответа всегда устанавливается0 , независимо от того, удалось ли первоначальный запрос или не удалось.
• Оба метода add()/ API кэш-хранилища addAll()будут отклонены, если ответы, полученные в результате любого из запросов, имеют код состояния, который не находится в диапазоне 2XX .

Из этих двух пунктов следует, что если запрос, выполняемый как часть вызова add()/, addAll()дает непрозрачный ответ, он не будет добавлен в кеш.

Вы можете обойти это, явно выполнив, fetch()а затем вызвав put()метод с непрозрачным ответом. Поступая так, вы фактически исключаете риск того, что кешируемый ответ мог быть ошибкой, возвращенной вашим сервером.

const request = new Request('https://third-party-no-cors.com/', {mode: 'no-cors'});
// Assume `cache` is an open instance of the Cache class.
fetch(request).then(response => cache.put(request, response));

Непрозрачные ответы и API navigator.storage

Чтобы избежать утечки междоменной информации, к размеру непрозрачного ответа, используемого для расчета пределов квоты хранилища (т.е. генерируется ли QuotaExceededисключение), и сообщается navigator.storageAPI, добавлены значительные отступы .

Детали этого заполнения варьируются от браузера к браузеру, но для Google Chrome это означает, что минимальный размер, который любой кешированный непрозрачный ответ вносит в общее использование хранилища, составляет примерно 7 мегабайт . Вы должны помнить об этом при определении количества непрозрачных ответов, которые вы хотите кэшировать, поскольку вы можете легко превысить ограничения квоты хранилища намного раньше, чем вы ожидали бы в противном случае, исходя из фактического размера непрозрачных ресурсов.