使用 \'no-cors\' 在 fetch 中区分网络错误和不透明响应答案

【问题标题】：Distinguish network error from opaque response in fetch with 'no-cors'使用 \'no-cors\' 在 fetch 中区分网络错误和不透明响应
【发布时间】：2022-10-14 23:43:43
【问题描述】：

tldr;发送模式为“no-cors”的获取请求时，不透明响应如何与网络错误区分开来？

我相信：

不透明的响应静默失败 - 获取解决
网络错误导致提取失败 - 提取拒绝

任何人都可以确认吗？（编辑：Same approach as used here）

背景：从我的 UI 我想检查各种 url 是否可以访问（例如，它们没有被防火墙阻止）。在这个答案中：https://stackoverflow.com/a/53442328/1534823 它说：

no-cors 模式意味着，如果浏览器必须执行任何需要 CORS 许可的操作，它将静默失败，而不是抛出错误。

问题：

如果带有“no-cors”标头的获取请求：

... 遇到网络错误 - 这会导致 fetch 承诺被拒绝吗？

... 遇到 CORS 问题 - 它会静默失败，即 fetch 承诺会解决？

文档：

临：在 chrome dev-tools 中，我可以通过阻止域来模拟网络错误，这似乎表明上述 2 条陈述是正确的 - 但我不确定它反映现实生活中的网络错误的可靠性如何。

反对：这些文档没有提到 CORS 异常也会引发 TypeError 获取：https://developer.mozilla.org/en-US/docs/Web/API/fetch#exceptions

反对：在获取规范中：https://fetch.spec.whatwg.org/#concept-filtered-response-opaque 它说：

换句话说，不透明过滤响应和不透明重定向过滤响应与网络错误几乎无法区分。

...或者我可以以某种方式使用 CORS 预检请求来检查是否可以访问不允许 CORS 的服务器？（或者只是发送一个 OPTIONS 请求？）

【问题讨论】：

标签： cors fetch general-network-error

【解决方案1】：

这里有很多问题。

您是正确的，不透明的响应不会导致拒绝承诺。但是，CORS 故障会导致网络错误，而不是不透明的响应。但是，如果使用“no-cors”，则不会出现 CORS 失败（请注意，这不是标题，它是 Request 对象的输入）。

使用“no-cors”，您可以使用的 HTTP 方法受到限制，因此OPTIONS 不是一个选项（不是开玩笑）。浏览器也越来越多地限制“no-cors”可以达到的范围，因为这些响应在 Spectre 的世界中是有问题的。 https://github.com/annevk/orb 对此有更多详细信息。所以长期使用fetch(url, { mode: "no-cors" }) 可能不会得到你想要的，因为你会越来越多地看到更多的网络错误，尽管服务器可能是可以访问的。

【讨论】：