不透明响应被定义为Fetch API 的一部分，表示在未启用CORS时向远程源发出的请求的结果。
关于如何使用来自 JavaScript 和作为页面资源的不透明响应，存在哪些实际限制和“陷阱”？
哪些限制适用于不透明响应？
IT技术
javascript
cors
service-worker
fetch-api
2021-01-27 03:55:55
1个回答
访问不透明响应的标题/正文
对不透明响应的最直接限制是，您无法从类的大多数属性（Response如 ）中获取有意义的信息，也无法headers调用构成接口的各种方法Body（如json()或 ）text()。这符合不透明响应的黑盒性质。
使用不透明响应作为页面资源
只要浏览器允许使用非 CORS 跨域资源，就可以将不透明响应用作网页上的资源。以下是非 CORS 跨源资源及其不透明响应有效的元素子集，改编自Mozilla 开发人员网络文档：
<script><link rel="stylesheet"><img>,<video>, 和<audio><object>和<embed><iframe>
一个值得注意的使用案例，其不透明的react是不是有效的是字体资源。
通常，要确定是否可以将不透明响应用作页面上的特定类型资源，请查看相关规范。例如，HTML 规范解释了非 CORS 跨域（即不透明）响应可用于<script>元素，但有一些限制以防止泄漏错误信息。
不透明响应和缓存存储 API
开发人员可能遇到不透明响应的一个“陷阱”涉及将它们与Cache Storage API 一起使用。有两条背景信息是相关的：
从这两点来看，如果作为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
为了避免跨域信息泄露，在用于计算存储配额限制（即是否QuotaExceeded抛出异常）并由navigator.storageAPI报告的不透明响应的大小中添加了大量填充。
此填充的详细信息因浏览器而异，但对于 Google Chrome，这意味着任何单个缓存的不透明响应对整体存储使用量的贡献的最小大小约为 7 兆字节。在确定要缓存的不透明响应的数量时，您应该牢记这一点，因为根据不透明资源的实际大小，您很容易超出存储配额限制，而这比您预期的要快得多。