如何使用不透明响应的 API？

Question

我试过这样使用 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();
    }
);

但是我得到了

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://catfact.ninja/fact?limit=1. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

TypeError: NetworkError when attempting to fetch resource.

所以在尝试

之后

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: unexpected end of data at line 1 column 1 of the JSON data

我从 here that I won't be able to use this API as intended. But if so, what is the purpose of it and how is it intended to be used (this 了解到信息没有说明问题）？

Answer 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": "*" 是一个响应 header。不要将其放在请求中。它不会做任何有用的事情，并且可能会将一个简单的请求变成一个预检请求。

Answer 2

添加 {mode: 'no-cors'} 并不是 CORS 错误的全部。您最好使用 CORS Proxy。

This question 可能对您也有用。

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

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


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


getCatFact()

如何使用不透明响应的 API？

How to use an API with opaque response?

javascript

response

fetch-api