適用於不透明響應有哪些限制？

Question

Opaque responses被定義爲Fetch API的一部分，並且表示當CORS未啓用時對遠程原點的請求的結果。

圍繞如何使用不透明的響應（來自JavaScript和頁面上的資源），存在哪些實際限制和「疑難雜症」？

Answer 1

爲不透明迴應頭接入/身體

周圍不透明反應最直接的限制是，你不能得到有意義的信息大部分來自Response類的properties回來，像headers，或撥打各methods，它們構成了Body接口，如json()或text()。這與不透明的響應的黑盒性質保持一致。

在頁面上只要瀏覽器允許使用一個跨域資源

不透明的反應可以作爲一個網頁上的資源使用不透明響應爲資源。這裏的元素，其跨源資源，併爲此不透明的反應，是有效的一個子集，改編自Mozilla Developer Network documentation：

• <script>
• <link rel="stylesheet">
• <img>，<video>和<audio>
• <object>和<embed>

不透明響應爲而不是有效的爲font resources。

通常，要確定您是否可以將不透明的響應用作頁面上特定類型的資源，請檢查相關規範。例如，儘管有一些限制來防止泄漏的錯誤信息，但是交叉原點（即不透明）響應可以用於<script>元素。

不透明迴應&緩存存儲API

一個「疑難雜症」的是開發商might run into不透明反應包括使用它們與Cache Storage API。背景兩個部分信息是相關的：

• 不透明響應的status屬性爲always set to 0，無論原來的請求是成功還是失敗。
• 緩存存儲API的add()/addAll()方法都會拒絕，如果任何請求產生的響應的狀態代碼不在2XX range中。

從這些兩分，它遵循的是，如果請求爲在不透明響應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)); 

不透明響應&的navigator.storage API

爲了避免的跨域信息泄漏，有顯著填充加入到不透明的響應的用於計算存儲配額限制的大小（即是否拋出QuotaExceeded異常）並由navigator.storage API報告。

此填充的細節從瀏覽器到瀏覽器而變化，但對於谷歌瀏覽器，這意味着該最小大小，任何單個緩存不透明響應有助於整體存儲使用率approximately 7 megabytes。在確定要緩存多少不透明的響應時，您應該記住這一點，因爲您可以比基於不透明資源的實際大小更快地超出存儲配額限制。