不透明响应有哪些限制？

Question

不透明响应被定义为Fetch API的一部分,并表示在未启用CORS时对远程源发出的请求的结果.

关于如何使用不透明的响应(包括JavaScript和页面上的资源)存在哪些实际限制和"陷阱"？

Answer 1

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

关于不透明响应的最直接的限制是你无法从类的大多数属性中获取有意义的信息Response,比如headers或者调用构成接口的各种方法Body,比如json()或text().这与不透明响应的黑盒特性保持一致.

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

只要浏览器允许使用非CORS跨源资源,不透明响应就可以用作网页上的资源.以下是非CORS跨源资源的元素子集,因此不透明响应是有效的,可以从Mozilla Developer Network文档中进行调整:

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

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

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

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

开发人员可能遇到不透明响应的一个"问题" 涉及将它们与Cache Storage API一起使用.两条背景信息是相关的:

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

从这两点可以看出,如果作为add()/ addAll()call的一部分执行的请求导致不透明响应,则无法将其添加到缓存中.

您可以通过显式执行a fetch()然后put()使用opaque响应调用该方法来解决此问题.通过这样做,您可以有效地选择您正在缓存的响应可能是您的服务器返回的错误的风险.

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兆字节.在确定要缓存的不透明响应数时,应牢记这一点,因为根据不透明资源的实际大小,您可能比您预期的更快地超出存储配额限制.