Dostęp do nagłówków / treści nieprzejrzystych odpowiedzi
Najprostszym ograniczenie wokół nieprzezroczystych odpowiedzi jest to, że nie można uzyskać informację o znaczącej powrotnej z większości właściwości w Response
klasie, jak headers
, lub zadzwoń do różnych metod , które tworzą Body
interfejs, jak json()
i text()
. Jest to zgodne z czarnoskrzynkową naturą nieprzejrzystej odpowiedzi.
Używanie nieprzejrzystych odpowiedzi jako zasobów na stronie
Nieprzezroczyste odpowiedzi mogą służyć jako zasób na stronie sieci Web, ilekroć przeglądarka zezwala na użycie zasobu innego pochodzenia niż CORS. Oto podzbiór elementów, dla których poprawne są zasoby pochodzące z innych źródeł niż CORS, a tym samym nieprzezroczyste odpowiedzi, zaadaptowane z dokumentacji Mozilla Developer Network :
<script>
<link rel="stylesheet">
<img>
, <video>
i<audio>
<object>
i <embed>
<iframe>
Godnym uwagi przypadek użycia, dla których odpowiedzi są nieprzezroczyste nie ważne jest dla zasobów czcionek .
Ogólnie, aby określić, czy można użyć nieprzejrzystej odpowiedzi jako określonego typu zasobu na stronie, należy sprawdzić odpowiednią specyfikację. Na przykład specyfikacja HTML wyjaśnia, że dla <script>
elementów mogą być używane krzyżowe odpowiedzi inne niż CORS (tj. Nieprzezroczyste) , chociaż z pewnymi ograniczeniami, aby zapobiec wyciekaniu informacji o błędach.
Nieprzezroczyste odpowiedzi i interfejs API pamięci podręcznej
Jednym z problemów, na które programiści mogą napotkać nieprzejrzyste odpowiedzi, jest używanie ich z Cache Storage API . Istotne są dwie podstawowe informacje:
status
Własnością nieprzezroczystej odpowiedź jest zawsze ustawiony0
, niezależnie od tego, czy oryginalny wniosek udało, czy nie.
- Obie metody
add()
/ addAll()
metody Cache Storage API będą odrzucać, jeśli odpowiedzi wynikające z któregokolwiek z żądań mają kod stanu spoza zakresu 2XX .
Z tych dwóch punktów wynika, że jeśli żądanie wykonane jako część wywołania add()
/ addAll()
spowoduje nieprzezroczystą odpowiedź, nie zostanie ono dodane do pamięci podręcznej.
Możesz obejść ten problem, jawnie wykonując a, fetch()
a następnie wywołując put()
metodę z nieprzezroczystą odpowiedzią. W ten sposób skutecznie akceptujesz ryzyko, że buforowana odpowiedź mogła być błędem zwróconym przez serwer.
const request = new Request('https://third-party-no-cors.com/', {mode: 'no-cors'});
fetch(request).then(response => cache.put(request, response));
Nieprzezroczyste odpowiedzi i interfejs API navigator.storage
Aby uniknąć wycieku informacji międzydomenowych, do rozmiaru nieprzezroczystej odpowiedzi używanej do obliczania limitów przydziału pamięci (tj. Czy QuotaExceeded
zgłaszany jest wyjątek) i zgłaszanych przez navigator.storage
API, dodano znaczące wypełnienie .
Szczegóły tego wypełnienia różnią się w zależności od przeglądarki, ale w przypadku Google Chrome oznacza to, że minimalny rozmiar, jaki każda pojedyncza nieprzezroczysta odpowiedź w pamięci podręcznej przyczynia się do ogólnego wykorzystania pamięci, wynosi około 7 megabajtów . Należy o tym pamiętać podczas określania liczby nieprzezroczystych odpowiedzi, które mają być buforowane, ponieważ można łatwo przekroczyć ograniczenia przydziału magazynu znacznie wcześniej, niż można by się spodziewać w oparciu o rzeczywisty rozmiar nieprzezroczystych zasobów.
cdn.x.com/test.jpg
a żądania pamięci podręcznej przejść do domeny głównejwww.x.com/test.jpg
./test.jpg
następnie dla każdego żądania pobrania, abycdn.x.com/test.jpg
zmodyfikować adres URL z domeną źródłową (adres URL staje sięwww.x.com/test.jpg
), używam czegoś takiegoconst cacheUrl = (url.hostname == 'cdn.x.com')? new URL(event.target.location.origin + url.pathname): url;
:. Następnie żądam pamięci podręcznej z tym nowym adresem URLcaches.match(cacheUrl)
, który wydaje się do pracy dobrze. Jakieś takie podejście?