问题描述
不透明响应被定义为 Fetch API，并表示在 CORS 未启用.
Opaque responses are defined as part of the Fetch API, and represent the result of a request made to a remote origin when CORS is not enabled.
关于如何使用不透明响应(来自 JavaScript 和作为页面上的资源)存在哪些实际限制和陷阱"?
What practical limitations and "gotchas" exist around how opaque responses can be used, both from JavaScript and as resources on a page?
推荐答案
访问不透明响应的标题/正文
不透明响应最直接的限制是您无法从大多数 Response 类的属性，例如 headers，或调用各种方法Body 接口，如 json() 或 text().这符合不透明响应的黑盒特性.
The most straightforward limitation around opaque responses is that you cannot get meaningful information back from most of the properties of the Response class, like headers, or call the various methods that make up the Body interface, like json() or text(). This is in keeping with the black-box nature of an opaque response.
将不透明响应用作页面上的资源
只要浏览器允许使用非 CORS 跨域资源，就可以将不透明响应用作网页上的资源.这是非 CORS 跨域资源以及因此不透明响应有效的元素子集，改编自 Mozilla 开发者网络文档:
Opaque responses can be used as a resource on a web page whenever the browser allows for a non-CORS cross-origin resource to be used. Here's a subset of elements for which non-CORS cross-origin resources, and therefor opaque responses, are valid, adapted from the Mozilla Developer Network documentation:
<脚本><link rel="stylesheet"><img>、<video>和<audio><object>和<embed><iframe>
<script><link rel="stylesheet"><img>,<video>, and<audio><object>and<embed><iframe>
不透明响应无效有效的一个值得注意的用例是 字体资源.
A notable use case for which opaque responses are not valid is for font resources.
通常，要确定是否可以将不透明响应用作页面上的特定类型资源，请查看相关规范.例如，HTML 规范说明非 CORS<script> 元素可以使用跨域(即不透明)响应，但有一些限制以防止泄漏错误信息.
In general, to determine whether you can use an opaque response as a particular type of resource on a page, check the relevant specification. For example, the HTML specification explains that non-CORS cross-origin (i.e. opaque) responses can be used for <script> elements, though with some limitations to prevent leaking error information.
不透明的响应和缓存存储 API
一个陷阱"开发人员可能遇到的响应不透明，涉及将它们与 缓存存储 API.有两条背景信息是相关的:
One "gotcha" that developer might run into with opaque responses involves using them with the Cache Storage API. Two pieces of background information are relevant:
从这两点来看，如果作为 add()/addAll() 调用的一部分执行的请求导致不透明的响应，它将失败被添加到缓存中.
From those two points, it follows that if the request performed as part of the add()/addAll() call results in an opaque response, it will fail to be added to the cache.
您可以通过显式执行 fetch() 然后调用 put() 方法，响应不透明.通过这样做，您实际上是在选择承担您正在缓存的响应可能是您的服务器返回的错误的风险.
You can work around this by explicitly performing a fetch() and then calling the put() method with the opaque response. By doing so, you're effectively opting-in to the risk that the response you're caching might have been an error returned by your server.
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.
In order to avoid leakage of cross-domain information, there's significant padding added to the size of an opaque response used for calculating storage quota limits (i.e. whether a QuotaExceeded exception is thrown) and reported by the navigator.storage API.
此填充的详细信息因浏览器而异，但对于 Google Chrome，这意味着任何单个缓存的不透明响应对整体存储使用量的最小大小是 大约 7 兆字节.在确定要缓存多少不透明响应时，您应该牢记这一点，因为您很容易超出存储配额限制，比您根据不透明资源的实际大小预期的要快得多.
The details of this padding vary from browser to browser, but for Google Chrome, this means that the minimum size that any single cached opaque response contributes to the overall storage usage is approximately 7 megabytes. You should keep this in mind when determining how many opaque responses you want to cache, since you could easily exceeded storage quota limitations much sooner than you'd otherwise expect based on the actual size of the opaque resources.
这篇关于哪些限制适用于不透明响应?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！