API 액세스 HTML / 자바 스크립트 문제

Question

API 액세스 HTML / 자바 스크립트 문제

4

171 2019-03-24

자바 스크립트를 사용하여 Tzscan API에서 데이터를 요청하여 순환 공급을 얻으려고 시도하는 데 문제가 있습니다.

유통 공급을 요청하는 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에서 데이터를 가져 오는 자바 스크립트 코드 :

 <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를 혼합 할 수 없으며 모두 동일해야합니다.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);