如何使用具有不透明响应的 API？答案

【问题标题】：How to use an API with opaque response?如何使用具有不透明响应的 API？
【发布时间】：2020-02-17 16:31:49
【问题描述】：

我尝试像这样使用Cat Facts API：

const URL = "https://catfact.ninja/fact?limit=1" // In browser, this displays the JSON

fetch(URL).then(response=> {
        console.log(response);
        return response.json();
    }
);

但我得到了

跨域请求被阻止：同源策略不允许读取位于https://catfact.ninja/fact?limit=1 的远程资源。（原因：CORS 标头“Access-Control-Allow-Origin”缺失）。

TypeError：尝试获取资源时出现 NetworkError。

所以在尝试之后

fetch(URL, {mode:'no-cors'})
    .then(response=> {
        console.log(response);
        return response.json();
    }
);

我现在明白了

Response { type: "opaque", url: "", redirected: false, status: 0, ok: false, statusText: "", headers: Headers, body: null, bodyUsed: false }

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

我从here 了解到，我将无法按预期使用此 API。但如果是这样，它的目的是什么以及它打算如何使用（this info 没有说明问题）？

【问题讨论】：

标签： javascript response fetch-api

【解决方案1】：

不透明的响应是您看不到其内容的响应。它们本身没有用。

设置mode: 'no-cors' 是一个声明，您不需要阅读响应（或做任何其他需要 CORS 许可的操作）。

例如，JavaScript 可能正在发送分析数据以供服务器记录。

no-cors 模式的好处是它可以让您发送数据而不会在 JS 控制台中报告异常（这将 (a) 如果有人打开它会看起来很糟糕并且 (b) 泛滥带有垃圾的控制台，很难找到真正的错误）。

如果您需要访问响应，请不要设置mode: 'no-cors'。如果是跨域请求，则需要使用some other technique to bypass the Same Origin Policy。

旁白："Access-Control-Allow-Origin": "*" 是一个响应标头。不要不要将它放在请求中。它不会做任何有用的事情，并且可能会将简单的请求变成预检请求。

【讨论】：

谢谢。在添加 no-cors 之前，我并没有真正理解它（正在尝试任何事情）。我会尽快研究的。那么，综上所述，这个API不能用吗？
如果 API 未授予 CORS（或 JSONP）权限，则您无法从其他来源的客户端 JS 直接向其发出请求。

【解决方案2】：

添加 {mode: 'no-cors'} 并不是 CORS 错误的万能药。使用CORS Proxy 可能会更好。

This question 也可能对您有用。

或者，根据您的需要，使用不同的 API 可能是最简单的解决方案。我能够从"https://meowfacts.herokuapp.com/" 返回一个猫事实。见下文。

const URL = "https://meowfacts.herokuapp.com/"


async function getCatFact() {
  const response = await fetch(URL)
  console.log(await response.json())
}


getCatFact()

【讨论】：