Mixed Content even After Using crossorigin.me


I’m working on Local Weather App. I’m trying to access openweathermap in CodePen using crossorigin.me but still got this error message:

Mixed Content: The page at 'https://codepen.io/xxx' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://api.openweathermap.org/data/2.5/weather'. This request has been blocked; the content must be served over HTTPS

This is my code:

var tautan = "https://crossorigin.me/http://api.openweathermap.org/data/2.5/weather?lat="+position.coords.latitude+"&lon="+position.coords.longitude+"&units=metric&appid=dad19d1fc96ea160b7a15c69c1a88ece";

When I try to visit the link locally in browser, I got Origin: header is required message. How to fix this problem? Is there any options I should provide before I could access openweathermap through crossorigin?

Thank you for all your help

Try https://cors-everywhere.herokuapp.com/ instead of crossorigin.me

But I usually recommend not to use openweathermap at all.

1 Like

It’s solved my issue, thanks. Why you didn’t recommend not to use openweathermap?

Openweather supports https only for paid accounts.

There are many weather APIs that use https, so you can do it right without using hacks like crossorigin.me or cors-everywhere.

Still, the hack helped me, so thank you!