如何使用带有不透明响应的api?

wz3gfoph  于 2021-09-29  发布在  Java
关注(0)|答案(2)|浏览(331)

我试着这样使用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标头“访问控制允许原点”)。
typeerror:尝试获取资源时出现networkerror。
所以在尝试了

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

我现在明白了
响应{type:“不透明”,url:,重定向:false,状态:0,确定:false,状态文本:,,标题:标题,正文:null,bodyused:false}
syntaxerror:json.parse:json数据第1行第1列的数据意外结束
我从这里了解到,我将无法按预期使用此api。但如果是这样的话,它的目的是什么?它打算如何使用(此信息不说明问题)?

x9ybnkn6

x9ybnkn61#

不透明的响应是您无法看到其内容的响应。它们本身没有用处。
背景 mode: 'no-cors' 声明您不需要读取响应(或执行任何其他需要cors许可的操作)。
例如,javascript可能正在发送分析数据以供服务器记录。
好处 no-cors 模式是,它允许您发送数据,而不会在js控制台中报告异常(如果有人打开它,它会看起来很糟糕,而(b)控制台中充斥着垃圾,很难找到真正的错误)。
如果需要访问响应,请不要设置 mode: 'no-cors' . 如果是跨源请求,则需要使用其他技术绕过同一源策略。
旁白: "Access-Control-Allow-Origin": "*" 是一个响应头。不要提出要求。它不会做任何有用的事情,可能会把一个简单的请求变成一个预处理的请求。

aiqt4smr

aiqt4smr2#

添加 {mode: 'no-cors'} 不是cors错误的包罗万象。您最好使用cors代理。
这个问题可能对你也有用。
或者,根据您的需要,使用不同的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()

相关问题