APIアクセスHTML / Javascriptの問題

Question

APIアクセスHTML / Javascriptの問題

4

171 2019-03-24

Tzscan APIからデータをリクエストして、JavaScriptを使用して循環供給を取得しようとすると問題が発生します:

循環供給を要求するHTMLコード:

 <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <h1>There Tezos Circulating : </h1>
  <div id="getapi"></div>
</body>
</html>

APIからデータを取得するためのJavascriptコード:

 <script>
  function createNode(element) {
    return document.createElement(element);
  }

  function append(parent, el) {
    return parent.appendChild(el);
  }

  const ul = document.getElementById('getapi');
  const url = 'http://api6.tzscan.io/v3/supply';
  fetch(url)
    .then((resp) => resp.json())
    .then(function(data) {
      let span = createNode('span');
      span.innerHTML = `${data.circulating_supply/1000000}`;
      append(ul, span);
    })
    .catch(function(error) {
      console.log(error);
    }); 
 </script>

問題は、HTMLファイルをローカルで作成しても、オンラインでは機能しないことです. .

I have an issue trying to use javascript to get the circulating supply by requesting data from Tzscan API:

HTML code to request the circulating supply:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <h1>There Tezos Circulating : </h1>
  <div id="getapi"></div>
</body>
</html>

Javascript Code to get the data from the API:

<script>
  function createNode(element) {
    return document.createElement(element);
  }

  function append(parent, el) {
    return parent.appendChild(el);
  }

  const ul = document.getElementById('getapi');
  const url = 'http://api6.tzscan.io/v3/supply';
  fetch(url)
    .then((resp) => resp.json())
    .then(function(data) {
      let span = createNode('span');
      span.innerHTML = `${data.circulating_supply/1000000}`;
      append(ul, span);
    })
    .catch(function(error) {
      console.log(error);
    }); 
 </script>

The problem is that somehow it works when I create a HTML file locally but not online.

- 発生しているエラーも含めると役立ちます.おそらくあなたのコーデックスを見ることができると思いますが、質問のために、質問にエラーを含めるのが最善です.
  
  it'll help to also include the errors you are getting. I know we could probably look at your codepen but for the sake of the question, it's best include the errors in the question.
  - 0
  - 2019-03-25
  - Frank

1 回答

投票

Richard Ayotte · Accepted Answer · 2019-03-24

7

2019-03-24

混合コンテンツエラーが発生しました.リクエストはhttpとhttpsを混在させることはできません.すべて同じである必要があり、できればhttpsである必要があります.const url = 'http://api6.tzscan.io/v3/supply';をhttp s

に変更するだけです.

 const url = 'https://api6.tzscan.io/v3/supply';

fetch(url)
.then(resp => resp.json())
.then(({dls}) => {
    let span = createNode('span');
    span.innerHTML = dls;
    append(ul, span);
})
.catch(console.log);

You've encountered a mixed content error. Requests can't be a mixture of http and https, they need to be all of the same, preferably https. Just change the const url = 'http://api6.tzscan.io/v3/supply'; to be https

const url = 'https://api6.tzscan.io/v3/supply';

fetch(url)
.then(resp => resp.json())
.then(({dls}) => {
    let span = createNode('span');
    span.innerHTML = dls;
    append(ul, span);
})
.catch(console.log);