获取返回 JSON 的外部 API 时出现问题

Question

我在获取应该返回 JSON 的外部 API 时遇到问题。

API 没有启用 CORS，所以我尝试使用带有选项 mode: "no-cors" 的 fetch。 我尝试使用jsonp，但根本不起作用。

下面是这段代码：

fetch(APIURL, {
  mode: "no-cors",
}).then(response => {
  console.log(response)
  return response.json();
}).then(data => {
  console.log(data);
}).catch(err => {
  console.log(err)
});

catch 语句返回这个SyntaxError: "JSON.parse: unexpected end of data at line 1 column 1 of the JSON data"

这是console.log(response)的结果

bodyUsed: true
headers: Headers
   <prototype>: HeadersPrototype { append: append(), delete: delete(), get:   get(), … }
ok: false
redirected: false
status: 0
statusText: ""
type: "opaque"
url: ""
<prototype>: ResponsePrototype { clone: clone(), arrayBuffer: arrayBuffer(), blob: blob(), … }

但是在网络选项卡中，我可以看到我想要使用的 JSON 响应，所以我觉得很奇怪，我可以在那里看到它，所以我认为问题出在我的最后。我尝试在验证器中验证 JSON 输出，它是有效的 JSON。

有什么想法吗？ 谢谢。

Answer 1

在正常情况下，由于同源政策，您无法从第三方站点读取数据。

CORS 允许第三方网站授予您的 JavaScript 读取数据的权限。

no-cors 设置是您的 JavaScript 表示“我不想做任何需要 CORS 许可的事情”的一种方式。这使您可以在无法读取响应的情况下发出发送数据的请求（好处是它避免了在开发人员控制台上抛出错误消息，告诉您无法读取您不想读取的数据） .

由于需要读取数据，所以不能使用no-cors。

由于网站不提供 CORS 权限，因此您无法使用客户端代码直接读取数据。

使用代理。