NetworkError when attempting to fetch resource in jsfiddle

Question

I'm making an autocomplete function for a webpage where users can find information about cities and their airports by typing the first letters of the city/airport name. I use javascript fetch for receiving all the active airports from the API:

let airports; 

fetch("http://api.travelpayouts.com/data/ru/airports.json")
    .then(data => data.json())
    .then(data => airports = JSON.parse(data))
    .catch(error => console.log(error.message));

It works locally but in case of jsfiddle.net i receive an error:

NetworkError when attempting to fetch resource.

I googled the problem but could only find the reason of such behavior and no solution so I end up with just hardcoding the response body into the fiddle. Any ways to fix it properly?

Answer 1

If you check the browser console, you will find this:

Mixed Content: The page at 'https://jsfiddle.net/' was loaded over HTTPS, but requested an insecure resource 'http://api.travelpayouts.com/data/ru/airports.json'. This request has been blocked; the content must be served over HTTPS.

You can't make a request from a site loaded over HTTPS to an insecure resource(http).

One work around while development would be to change the site settings on your browser by allowing insecure content.