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

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.

我理解了消息，并尝试请求 returns 一个不透明的响应：

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

好的，现在可以了...但是我看不懂。 =\

那么，不透明响应的目的是什么？

Answer 1

JavaScript 无法访问不透明的响应，但您仍然可以使用 Cache API 缓存它们并在服务工作者的 fetch 事件处理程序中响应它们。因此，它们对于使您的应用程序脱机非常有用，对于您无法控制的资源（例如 CDN 上未设置 CORS headers 的资源）也很有用。

Answer 2

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

这就是 { mode: 'no-cors' } 的目的。

Answer 3

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

代理的 url 从字面上取自路径，经过验证和代理。代理 URI 的协议部分是可选的，默认为 "http"。如果指定端口 443，协议默认为 "https".

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

Answer 4

javascript 获得答案有点棘手，我通过从后端获取 api 然后将其调用到前端来修复它。

public function get_typechange () {

    $ url = "https://........";
    $ json = file_get_contents ($url);
    $ data = json_decode ($ json, true);
    $ resp = json_encode ($data);
    $ error = json_last_error_msg ();
    return $ resp;

}

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

What is an opaque response, and what purpose does it serve?

cors

fetch-api