API 站点中通过 https 提供的 http 数据，脚本有 "mixed content" 错误

Question

我编写了一个 JS 脚本，它使用来自 http API 的数据（GET 请求的端点：http://api.open-notify.org/iss-now.json）。我打算在 github 页面（使用 https 协议）上托管的页面中使用它。
现在它已在线，我在控制台中看到无法使用此数据 in-browser，因为混合活动内容错误：Blocked loading mixed active content “http://api.open-notify.org/iss-now.json”.

我无法应用 this solution because I'm not making use of a server.js file (my content is served by github). I wanted to try this other 解决方案，但它需要在另一个选项卡中打开适配器页面，这是不可行的。我正在尝试 this workaround but https://cors-anywhere.herokuapp.com/http://api.open-notify.org/iss-now.json returns 一个错误（缺少必需的请求 header。必须指定以下之一：来源，x-requested-with）。如果有人知道如何将 headers 添加到 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);
  }

我开始添加“来源”header，却发现自己有一个

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cors-anywhere.herokuapp.com/http://api.open-notify.org/iss-now.json. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing) Which as far as I understand can only be corrected server-side. The github page of cors-anywhere encourages to implement their solution in your own script, by adding this snippet:

(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 提供相同的数据（ISS 的实时纬度和经度），但我现在似乎找不到，找到一个解决方法会很有趣无论如何。

Answer 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.log(res);
    // gotData(res);
  })
  .catch(err => {
    console.log(err);
  });

API 站点中通过 https 提供的 http 数据，脚本有 "mixed content" 错误

API data over http in site served over https, script has "mixed content" error

javascript

api

cors

p5.js

mixed-content