javascript - 如何处理来自 'opaque' 类型的获取响应？

Question

我正在尝试正确解释来自对 URL 的 fetch 调用的响应，我认为这是一个 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: unexpected end of data at line 1 column 1 of the JSON data

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



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

{"msg": "API is ready.", "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

本质上，你 不能从不透明的请求访问响应正文。

Adding mode: 'no-cors' won’t magically make things work. Browsers by default block frontend code from accessing resources cross-origin. If a site sends Access-Control-Allow-Origin in its responses, then browsers will relax that blocking and allow your code to access the response.

But if a site doesn’t send the Access-Control-Allow-Origin header in its responses, then there’s no way your frontend JavaScript code can directly access responses from that site. In particular, specifying mode: 'no-cors' won’t fix that (in fact it’ll just make things worse).

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

也来自 fetch文档:

no-cors — Prevents the method from being anything other than HEAD, GET or POST, and the headers from being anything other than simple headers. If any ServiceWorkers intercept these requests, they may not add or override any headers except for those that are simple headers. In addition, JavaScript may not access any properties of the resulting Response. This ensures that ServiceWorkers do not affect the semantics of the Web and prevents security and privacy issues arising from leaking data across domains.

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