我试着这样使用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。但如果是这样的话,它的目的是什么?它打算如何使用(此信息不说明问题)?
2条答案
按热度按时间x9ybnkn61#
不透明的响应是您无法看到其内容的响应。它们本身没有用处。
背景
mode: 'no-cors'
声明您不需要读取响应(或执行任何其他需要cors许可的操作)。例如,javascript可能正在发送分析数据以供服务器记录。
好处
no-cors
模式是,它允许您发送数据,而不会在js控制台中报告异常(如果有人打开它,它会看起来很糟糕,而(b)控制台中充斥着垃圾,很难找到真正的错误)。如果需要访问响应,请不要设置
mode: 'no-cors'
. 如果是跨源请求,则需要使用其他技术绕过同一源策略。旁白:
"Access-Control-Allow-Origin": "*"
是一个响应头。不要提出要求。它不会做任何有用的事情,可能会把一个简单的请求变成一个预处理的请求。aiqt4smr2#
添加
{mode: 'no-cors'}
不是cors错误的包罗万象。您最好使用cors代理。这个问题可能对你也有用。
或者,根据您的需要,使用不同的api可能是最简单的解决方案。我能从你那里得到一个事实
"https://meowfacts.herokuapp.com/"
. 见下文。