Я написал сценарий 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);
}
Я добавляю заголовок "origin" только для того, чтобы обнаружить, что
Запрос между источниками заблокирован: та же политика происхождения запрещает чтение удаленный ресурс в https://cors-anywhere.herokuapp.com/http://api.open-notify.org/iss-now.json. (Причина: заголовок CORS «Access-Control-Allow-Origin» отсутствует) Который, насколько я понимаю, можно исправить только на стороне сервера. Страница github cors-anywhere рекомендует реализовать их решение в вашем собственном скрипте, добавив этот фрагмент:
(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.info(data.iss_position.latitude);
//console.info(data.iss_position.longitude);
posX = (parseFloat(data.iss_position.latitude * latConst) + translateX)
posY = (parseFloat(data.iss_position.longitude * lonConst)* -1 + translateY)
console.info(posX);
console.info(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.info(res);
// gotData(res);
})
.catch(err => {
console.info(err);
});
Вы привыкнете к этому :) Нет необходимости проверять, есть ли response.ok
или есть ли ошибка, прежде чем использовать ответ, потому что, если запрос не удался или если ответ не может быть проанализирован, ваши then
не будут быть выполнено, оно попадет прямо в catch
, если есть ошибка
Ура! Работает как шарм. Мне действительно нужно научиться использовать fetch(), сохраняя при этом простоту, моя попытка реализации была ужасной.