Estoy creando una función de autocompletar para una página web donde los usuarios pueden encontrar información sobre las ciudades y sus aeropuertos escribiendo las primeras letras del nombre de la ciudad/aeropuerto. Uso la búsqueda de JavaScript para recibir todos los aeropuertos activos de la 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));Funciona localmente pero en el caso de jsfiddle.net recibo un error:
NetworkError when attempting to fetch resource.
Busqué en Google el problema, pero solo pude encontrar la razón de tal comportamiento y ninguna solución, así que terminé simplemente codificando el cuerpo de la respuesta en el violín. ¿Alguna forma de arreglarlo correctamente?
Si revisa la consola del navegador, encontrará esto:
Contenido mixto: la página en 'https://jsfiddle.net/' se cargó a través de HTTPS, pero solicitó un recurso inseguro 'http://api.travelpayouts.com/data/ru/airports.json'. Esta solicitud ha sido bloqueada; el contenido debe servirse a través de HTTPS.
No puede realizar una solicitud desde un sitio cargado a través de HTTPS a un recurso no seguro (http).
Una solución durante el desarrollo sería cambiar la configuración del sitio en su navegador permitiendo contenido inseguro.