Данные API через http на сайте, обслуживаемом через https, скрипт имеет ошибку "смешанный контент"

Я написал сценарий 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, предоставляющий те же данные (широту и долготу МКС в реальном времени), но сейчас я не могу их найти, и в любом случае было бы интересно найти обходной путь.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
539
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете использовать 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);
  });

Ура! Работает как шарм. Мне действительно нужно научиться использовать fetch(), сохраняя при этом простоту, моя попытка реализации была ужасной.

WildWilyWilly 13.12.2020 03:19

Вы привыкнете к этому :) Нет необходимости проверять, есть ли response.ok или есть ли ошибка, прежде чем использовать ответ, потому что, если запрос не удался или если ответ не может быть проанализирован, ваши then не будут быть выполнено, оно попадет прямо в catch, если есть ошибка

blex 13.12.2020 03:21

Другие вопросы по теме