不透明的响应有哪些限制？

不透明响应定义为Fetch API的一部分，表示未启用CORS时对远程源的请求结果。

关于如何使用不透明的响应（无论是来自JavaScript还是作为页面资源）存在哪些实际限制和“陷阱”？

访问不透明响应的标题/正文

关于不透明响应的最直接的限制是，您无法从类的大多数属性（Response如）获取有意义的信息，也无法headers调用构成接口的各种方法Body（如json()或）text()。这与不透明响应的黑盒性质保持一致。

使用不透明响应作为页面上的资源

每当浏览器允许使用非CORS跨域资源时，不透明的响应都可以用作网页上的资源。根据Mozilla开发人员网络文档改编而成，以下是元素的子集，这些元素的子集对非CORS跨域资源及其透明响应是有效的：

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

一个值得注意的使用案例，其不透明的反应是不是有效的是字体资源。

通常，要确定是否可以将不透明的响应用作页面上的特定资源类型，请检查相关规范。例如，HTML规范解释了非CORS跨域（即不透明）响应可用于<script>元素，尽管有一些限制以防止泄漏错误信息。

不透明的响应和缓存存储API

开发人员可能会遇到不透明的响应的一个“陷阱”涉及将它们与Cache Storage API一起使用。有两个相关的背景信息：

• 无论原始请求成功还是失败，status不透明响应的属性始终设置为0。
• 如果任何请求产生的响应的状态代码不在2XX范围内，则Cache Storage API的add()/addAll()方法都将拒绝。

从这两点来看，如果作为add()/addAll()调用的一部分执行的请求导致响应不透明，则将无法将其添加到缓存中。

您可以通过显式执行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));

不透明的响应和navigator.storage API

为了避免跨域信息泄漏，API会QuotaExceeded在用于计算存储配额限制（即是否引发异常）的不透明响应的大小上添加大量填充。navigator.storage

此填充的详细信息因浏览器而异，但是对于Google Chrome浏览器来说，这意味着任何单个缓存的不透明响应对总体存储使用量贡献的最小大小约为7兆字节。确定要缓存的不透明响应的数量时，请牢记这一点，因为与不透明资源的实际大小相比，您很容易比预期的要早得多地超出存储配额限制。