Javascript 哪些限制适用于不透明响应？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39109789/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What limitations apply to opaque responses?
提问by Jeff Posnick
Opaque responsesare defined as part of the Fetch API, and represent the result of a request made to a remote origin when CORSis not enabled.
不透明响应被定义为Fetch API 的一部分，表示在未启用CORS时向远程源发出的请求的结果。
What practical limitations and "gotchas" exist around how opaque responses can be used, both from JavaScript and as resources on a page?
围绕如何使用不透明响应（来自 JavaScript 和作为页面上的资源）存在哪些实际限制和“陷阱”？
回答by Jeff Posnick
Access to Opaque Responses' Headers / Body
访问不透明响应的标题/正文
The most straightforward limitation around opaque responses is that you cannot get meaningful information back from most of the propertiesof the Responseclass, like headers, or call the various methodsthat make up the Bodyinterface, like json()or text(). This is in keeping with the black-box nature of an opaque response.
对不透明响应的最直接限制是，您无法从类的大多数属性（Response如 ）中获取有意义的信息，也无法headers调用构成接口的各种方法Body（如json()或 ）text()。这符合不透明响应的黑盒性质。
Using Opaque Responses as Resources on a Page
使用不透明响应作为页面上的资源
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:
只要浏览器允许使用非 CORS 跨域资源，不透明响应就可以用作网页上的资源。以下是非 CORS 跨域资源及其不透明响应有效的元素子集，改编自Mozilla 开发人员网络文档：
<script><link rel="stylesheet"><img>,<video>, and<audio><object>and<embed><iframe>
<script><link rel="stylesheet"><img>,<video>, 和<audio><object>和<embed><iframe>
A notable use case for which opaque responses are notvalid is for font resources.
一个值得注意的使用案例，其不透明的反应是不是有效的是字体资源。
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 explainsthat non-CORS cross-origin (i.e. opaque) responses can be used for <script>elements, though with some limitations to prevent leaking error information.
通常，要确定是否可以将不透明响应用作页面上的特定类型资源，请查看相关规范。例如，HTML 规范解释了非 CORS 跨域（即不透明）响应可用于<script>元素，但有一些限制以防止泄漏错误信息。
Opaque Responses & the Cache Storage API
不透明响应和缓存存储 API
One "gotcha" that developer might run intowith opaque responses involves using them with the Cache Storage API. Two pieces of background information are relevant:
开发人员可能遇到不透明响应的一个“陷阱”涉及将它们与Cache Storage API 一起使用。有两条背景信息是相关的：
- The
statusproperty of an opaque response is always set to0, regardless of whether the original request succeeded or failed. - The Cache Storage API's
add()/addAll()methods will both reject if the responses resulting from any of the requests have a status code that isn't in the 2XX range.
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.
从这两点来看，如果作为add()/addAll()调用的一部分执行的请求导致不透明的响应，它将无法添加到缓存中。
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.
您可以通过显式执行 afetch()然后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));
Opaque Responses & the navigator.storage API
不透明响应和 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 QuotaExceededexception is thrown) and reported by the navigator.storageAPI.
为了避免跨域信息泄露，在用于计算存储配额限制（即是否QuotaExceeded抛出异常）并由navigator.storageAPI报告的不透明响应的大小中添加了大量填充。
The details of this padding vary from browser to browser, but for Google Chrome, this means that the minimumsize 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.
此填充的详细信息因浏览器而异，但对于 Google Chrome，这意味着任何单个缓存的不透明响应对整体存储使用量的贡献的最小大小约为 7 兆字节。在确定要缓存的不透明响应的数量时，您应该牢记这一点，因为根据不透明资源的实际大小，您很容易超出存储配额限制。
