如何处理来自“不透明”类型的获取响应？

Question

我正在尝试正确解释从 fetch 调用到 URL 的响应，我认为它是一个 json 字符串。我已经根据这里的类似帖子尝试了许多变体，但没有什么能让我使用有用的数据。这是一种尝试：

fetch('http://serverURL/api/ready/', {method: "POST", mode: "no-cors"})
    .then(function(response) { 
        response.json().then(function(data) {
            console.log('data:' + data);
        });
    })
    .catch(function(err) {
        console.log('Fetch Error :-S', err);
    });

这会在控制台中返回一个语法错误：

SyntaxError: JSON.parse: JSON 数据第 1 行第 1 列的数据意外结束

所以也许它不是 JSON...如果我在 console.log 行上放置一个断点，并将鼠标悬停在响应（上面的行）上，我会看到带有各种字段的响应对象 (?)：

不知道如何解释...status:0 表明它没有得到有效的响应。但是，如果我检查开发人员工具中的 Network 选项卡，然后单击 fetch 行，则状态为 200，并且响应窗口/JSON 部分会显示消息信息，如果您只是将 URL 放入浏览器 URL 中，您也会看到这些信息直接酒吧。与显示 JSON 字符串的“响应负载”部分一样：

{"msg": "API 已准备就绪。", "success": true}

所以......它看起来像json，不是吗？但是 fetch 无法将其作为 json 摄取？

这是另一种变体，但使用 response.text() 而不是 response.json()

fetch('http://serverURL/api/ready/', {method: "POST", mode: "no-cors"})
    .then((response) => {
        console.log(response);
        response.text().then((data) => {
            console.log("data:" + data);
    });
});

这将在控制台中打印响应对象（与上面相同：ok: false、status:0、type:opaque 等）。第二个 console.log 文件在 data: 之后不打印任何内容。如果我使用 response.json，我再次收到有关数据结束的语法错误，如上所述。

有任何想法吗？我意识到服务器可能没有提供 fetch 需要或想要的东西，但是，它确实提供了一些信息（至少在浏览器中直接使用 URL 时），这是我需要处理的，如 json 或文本或其他.

Answer 1

本质上，您无法从不透明的请求访问响应正文。

添加模式：'no-cors' 不会神奇地使事情起作用。默认情况下，浏览器会阻止前端代码跨源访问资源。如果站点在其响应中发送 Access-Control-Allow-Origin，则浏览器将放宽阻止并允许您的代码访问响应。

但是，如果站点没有在其响应中发送 Access-Control-Allow-Origin 标头，那么您的前端 JavaScript 代码就无法直接访问来自该站点的响应。特别是，指定 mode: 'no-cors' 不会解决这个问题（实际上它只会让事情变得更糟）。

来自/sf/answers/3028766891/

还有来自fetch文档：

no-cors — 防止方法是 HEAD、GET 或 POST 之外的任何内容，并且标题不能是简单标题之外的任何内容。如果任何 ServiceWorker 拦截了这些请求，他们可能不会添加或覆盖除简单标头之外的任何标头。 此外，JavaScript 可能无法访问结果响应的任何属性。这确保了 ServiceWorkers 不会影响 Web 的语义，并防止跨域泄漏数据引起的安全和隐私问题。

https://developer.mozilla.org/en-US/docs/Web/API/Request/mode