我正试图通过GET httprequest
使用此代码从this website获取引用var jsonObj;
var httpReq = new XMLHttpRequest();
var processJson = function (json)
{
jsonObj = JSON.parse(json);
document.getElementById("quote-text").innerHTML = jsonObj.quoteText;
document.getElementById("quote-author").innerHTML = jsonObj.quoteAuthor;
}
httpReq.onload = function()
{
if (httpReq.status === 200)
{
processJson(this.response);
}
};
httpReq.open("GET", "http://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en", true);
httpReq.send();
唯一的问题是这段代码只适用于Chrome上安装的CORS插件,否则无效。它给我的错误如下:
MLHttpRequest无法加载http://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此,不允许原点“http://127.0.0.1:64290”访问。
有任何线索吗?谢谢!
答案 0 :(得分:1)
如果他们使用JSONP,他们显然不知道CORS是什么 当您包含带回调的脚本时,JSONP是一种格式,然后风险是数据可能泄漏并且他们可以在页面中插入任何代码
var loadJSONP = (function(){
var unique = 0;
return function(url, callback, context) {
// INIT
var name = "_jsonp_" + unique++;
if (url.match(/\?/)) url += "&jsonp="+name;
else url += "?callback="+name;
// Create script
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
// Setup handler
window[name] = function(data){
callback.call((context || window), data);
document.getElementsByTagName('head')[0].removeChild(script);
script = null;
delete window[name];
};
// Load JSON
document.getElementsByTagName('head')[0].appendChild(script);
};
})();
loadJSONP(
'http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en',
function(data) {
console.log(data);
}
);
另一种可能的解决方案是使用像cors代理这样的东西 - 有一些但你可以建立自己的
var cors = "https://cors-anywhere.herokuapp.com/"
var url = "http://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en"
fetch(cors + url)
.then(res => res.json())
.then(json => console.log(json))

使用cors代理的风险是他们可以侦察通过的数据。您还可以随时使用额外的服务