Mixed Content even After Using crossorigin.me

1

Hello,

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

2

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

But I usually recommend not to use openweathermap at all.

1 Like
3

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

4

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.

5

Still, the hack helped me, so thank you!