javascript - 获取返回 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权限，因此无法直接使用客户端代码读取数据。

使用代理。