我编写了一个JS脚本，该脚本使用来自http API(GET请求的端点：http://api.open-notify.org/iss-now.json(的数据。我打算在github页面(使用https协议(上托管的页面中使用它
现在它已经联机，我在控制台中看到，由于混合活动内容错误：Blocked loading mixed active content “http://api.open-notify.org/iss-now.json”，该数据无法在浏览器中使用。
我无法应用此解决方案，因为我没有使用server.js文件(我的内容由github提供(。我想尝试另一种解决方案，但它需要在另一个选项卡中打开适配器页面，这是不可行的。我正在尝试这种变通方法，但是https://cors-anywhere.herokuapp.com/http://api.open-notify.org/iss-now.json返回一个错误(缺少必需的请求标头。必须指定以下其中之一：origin、x-requested-with.(。如果有人知道如何向loadJSON方法添加头，请告诉我，我在它的文档中找不到任何东西。我对fetch的语法并不完全满意，所以当我尝试它时：
var response = fetch("https://cors-anywhere.herokuapp.com/http://api.open-notify.org/iss-now.json", {
headers: {
Origin: window.location.protocol + '//' + window.location.host
}
});
if (response.ok) { // if HTTP-status is 200-299
// get the response body (the method explained below)
var json = response.json();
return(json);
} else {
alert("HTTP-Error: " + response.status);
}
我可以添加"；原点"；头，却发现自己有
阻止跨来源请求：同源策略不允许读取位于的远程资源https://cors-anywhere.herokuapp.com/http://api.open-notify.org/iss-now.json。(原因：缺少CORS标头"Access Control Allow Origin"(据我所知，这只能在服务器端进行更正。cors-anywhere的github页面鼓励您在自己的脚本中实现他们的解决方案，方法是添加以下片段：
(function() {
var cors_api_host = 'cors-anywhere.herokuapp.com';
var cors_api_url = 'https://' + cors_api_host + '/';
var slice = [].slice;
var origin = window.location.protocol + '//' + window.location.host;
var open = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function() {
var args = slice.call(arguments);
var targetOrigin = /^https?://([^/]+)/i.exec(args[1]);
if (targetOrigin && targetOrigin[0].toLowerCase() !== origin &&
targetOrigin[1] !== cors_api_host) {
args[1] = cors_api_url + args[1];
}
return open.apply(this, args);
};
})();
但我不知道如何实现它，我还没有成功地将它集成到我的代码中。
我的代码现在有点乱，但我可以向你展示这么多：
// global functions for the Tracker sample
function getData() {
// var promise = fetch("http://api.open-notify.org/iss-now.json");
loadJSON("http://api.open-notify.org/iss-now.json", gotData, 'jsonp');
}
function gotData(data) {
background(img)
displaySample()
// this will allow you to see the raw data live in your browser console
//console.log(data.iss_position.latitude);
//console.log(data.iss_position.longitude);
posX = (parseFloat(data.iss_position.latitude * latConst) + translateX)
posY = (parseFloat(data.iss_position.longitude * lonConst)* -1 + translateY)
console.log(posX);
console.log(posY);
fill(250, 50, 50, 90);
ellipse(posX, posY, 10, 10);
}
function draw() {
// case tracker
if (selectedSample === 1) {
translateX = boxSizeWidth / 2;
translateY = boxSizeHeight / 2;
latConst = boxSizeWidth / 360;
lonConst = boxSizeHeight / 180;
if (t === 0) {
getData()
}
}
我还试着找到一个https API，提供相同的数据(实时国际空间站的纬度和经度(，但我现在似乎找不到任何数据，无论如何，找到一个解决方法都很有趣。
您可以这样使用fetch：
fetch("https://cors-anywhere.herokuapp.com/http://api.open-notify.org/iss-now.json", {
headers: { Origin: window.location.host }
})
.then(res => res.json())
.then(res => {
console.log(res);
// gotData(res);
})
.catch(err => {
console.log(err);
});