什么是不透明响应，它有什么作用？

Question

我尝试

fetch

旧网站的URL，但发生了错误：

Fetch API cannot load http://xyz.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://abc' is therefore not allowed access.
If an opaque response serves your needs, set the request's mode to 'no-cors'
to fetch the resource with CORS disabled.

我理解了该消息，并尝试执行一个返回不透明响应的请求：

fetch("http://xyz", {'mode': 'no-cors'})

好吧，现在可以了……但我看不懂。 =\

那么不透明的回应的目的是什么？

Answer 1

考虑服务工作线程充当不可知缓存的情况。您唯一的目标是提供与从网络获得的资源相同的资源，但速度更快。当然，您无法确保所有资源都是您来源的一部分（例如，考虑由 CDN 提供的库）。由于服务工作线程有可能改变网络响应，因此您需要保证您对响应的内容、响应头、甚至结果不感兴趣。您只对作为黑盒的响应感兴趣，以便可能缓存它并更快地提供服务。

这就是

{ mode: 'no-cors' }

的用途。

Answer 2

JavaScript 无法访问不透明响应，但您仍然可以使用 Cache API 缓存它们，并在服务工作人员的

fetch

事件处理程序中响应它们。因此，它们对于使您的应用程序离线非常有用，也适用于您无法控制的资源（例如，CDN 上未设置 CORS 标头的资源）。

Answer 3

还有 Node JS 应用程序的解决方案。 CORS Anywhere 是一个 NodeJS 代理，它将 CORS 标头添加到代理请求中。

代理的 url 实际上是从路径中获取的，经过验证和代理。代理 URI 的协议部分是可选的，默认为“http”。如果指定端口 443，则协议默认为“https”。

除了 cookie 之外，该包不对 http 方法或标头施加任何限制。不允许请求用户凭据。该应用程序可以配置为需要一个标头来代理请求，例如以避免来自浏览器的直接访问。 https://robwu.nl/cors-anywhere.html

Answer 4

当我想监控单页应用程序的互联网可用性时，

no-cors

帮助了我一次。该页面需要访问互联网，我希望在无法访问互联网时得到通知（因为网络失败或其他原因）。

我可以访问接受推送的基于云的监控服务，即您可以向该服务发送 HTTP 调用，如果它在 X 分钟内没有看到调用，它会提醒您。一种心跳式的监控。

问题是该服务没有公开任何 CORS 标头（它旨在用于后端应用程序），并且我页面中的

fetch

将会失败。

no-cors

来救援：有了这个选项，我可以发送我的

GET

请求，但我不关心任何回应。要么它到达了监控服务并且一切正常，要么它没有到达并且发出警报。