Fictizia / Curso-JS-para-desarrolladores-web_ed7

FICTIZIA » Curso de JavaScript para desarrolladores web — 7ª Edición
19 stars 7 forks source link

Problema con peticiones AJAX - http y https #19

Closed LeylaVieira closed 7 years ago

LeylaVieira commented 7 years ago

Hi Ulises! como comenté en clase quiero usar la API del tiempo de OpenWheaterMap para hacer mi proyecto. En un principio decidí que para evitar errores en el momento de ingresar una ciudad usaría un input predictivo, para esto intenté usar el json del listado de ciudades que encontré en esa web; sin embargo, está mal formado!!! lo he comprobado con jsonviewer y da error... intenté arreglarlo a manita pero son más de 20 000 datos!! luego he buscado APIs libres que me den las ciudades, pero tampoco obtuve resultados... así que desistí de esa opción.

Entonces, se me ocurrió usar la API de Geolocalización + la Geocoding API de Google para obtener la ubicación del usuario y así devolver los datos del tiempo. Para poder usar esa API tuve que activar el HTTPS en mi web, lo hice y hasta ahí todo iba bien con la petición AJAX. Obtuve los parámetros que necesitaba para formar la URL que enviaría a la API del tiempo y... aquí viene el horror!!

La API del tiempo usa http y la de Google https, así que sale el error de Contenido mixto, para ser exacta:

Mixed Content: The page at 'https://www.leylajacqueline.com/proyectos/pyt-currentwheater/geolocalizacion.html' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://api.openweathermap.org/data/2.5/weather?q=Majadahonda,ES&units=metric&APPID=d4b4284682c6e9d52b7991716b8e007c'. This request has been blocked; the content must be served over HTTPS.

Intenté solucionarlo con crossorigin colocándola al inicio de la URL que va en http pero no funciona, me muestra este error:

XMLHttpRequest cannot load https://crossorigin.me/http://api.openweathermap.org/data/2.5/weather?q=Majadahonda,ES&units=metric&APPID=d4b4284682c6e9d52b7991716b8e007c. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://www.leylajacqueline.com' is therefore not allowed access. The response had HTTP status code 522.

Y bueno, la pregunta del millón... ¿conoces alguna forma de resolverlo? o ¿qué otras opciones puedo usar? Ya sabes que cualquier ayuda/idea es bienvenida!! Gracias! :smile::smile:

PD.: Perdona por todo el "testamento", pero pensé que era mejor describir todo el problema... y si por algún casual vas a la URL en donde tengo alojado el script, no te sorprendas con ese único botón que hay... sigo trabajando en la interfaz final :laughing:

UlisesGascon commented 7 years ago

Hola @LeylaVieira ! Por un lado... la parte del autocompletado... se podría solucionar con Places API Web Service. La mecánica sería enviar una llamada ajax con el input actual a google cada vez que el usuario deje de pulsar una tecla en el input.

El Json que nos facilitan desde Open Wether Map, tiene un error por el que sería necesario añadir una coma al final de cada salto de línea... se puede hacer con una expresión regular, pero aún así pesa 16mb.

Las cabeceras originales de openweathermap no están bien reconocidas por crossorigin, así que lo más recomendable es utilizar alguna alternativa como AnyOrigin pero que utilice HTTPS.

También puedes renunciar a la geolocalización y al HTTPS, utilizando una llamada ajax a ip-api.com, que hace una estimación de la localización por IP... pero tiene márgenes de precisión amplios, si no recuerdo mal... hasta 10km, pero creo que esta dentro de los márgenes que se necesitan para dar información meteorológica precisa.

Un abrazo!! Nos vemos el sábado en el OSW! :)

LeylaVieira commented 7 years ago

Muchas gracias por la ayuda @UlisesGascon!! 😄 al final he probado a usar ip-api.com y con eso va de maravilla!!! Nos vemos el sábado! 😃 😃 😃

jtavio commented 4 years ago

I have a problem in netlify testing my app. the request of an external api here the error code " Mixed Content: The page at 'https://nifty-lalande-7cb9d4.netlify.com/posts/82' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://jsonplaceholder.typicode.com/posts/82'. This request has been blocked; the content must be served over HTTPS." no se que puede ser