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

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: 第 1 行第 1 列的数据意外结束 JSON 数据

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

不确定如何解释...status:0 表明它没有得到有效响应。但是，如果我检查开发人员工具中的 Network 选项卡，然后单击 fetch 行，状态为 200，并且 Response 窗口/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 或 text 或其他.

Answer 1

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

添加模式：“no-cors”不会神奇地使事情正常进行。浏览器 默认阻止前端代码跨域访问资源。如果 站点在其响应中发送 Access-Control-Allow-Origin，然后 浏览器将放宽该阻止并允许您的代码访问 回应。

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

来自https://stackoverflow.com/a/43268098/1666071

也来自fetch 文档：

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

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