问题描述

不透明响应被定义为 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:

• 不透明的 status 属性响应是 总是设置为 0，无论是否原始请求成功或失败.
• 缓存存储 API 的 add()/addAll()2XX 范围.

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));