Calling OpenWeatherMap API is blocked due to CORS header ‘Access-Control-Allow-Origin’ missing

Calling OpenWeatherMap API is blocked due to CORS header ‘Access-Control-Allow-Origin’ missing
0.0 0

#1

I’m not sure exactly what I’m doing wrong here. I’ve spent quite a while trying to fix this and no matter what I do I can’t seem to get it working.

My codepen is here:https://codepen.io/christianbeach/pen/wjYPKR?editors=1111

I’m using getJSON to retrieve the JSON. Using console.log() it seems like the URL is formatted correctly, and when I paste it into the web browser it correctly displays the JSON. However, when trying to run my code on codepen, I get this error: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://codepen.io/boomerang/iFrameKey-c7be25cc-957b-0717-9cb3-32a7afd8d58a/api.openweathermap.org/data/2.5/weather?lat=44.9164354&lon=-92.90761909999999&APPID=84c375472712a1a880ffba2edbc74476. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). And my getJSON function doesn’t run


#2

Here’s an explanation of why this happens.

The tl;dr is to use a CORS proxy for your requests. Prepend https://cors-anywhere.herokuapp.com/ to your API’s URL.

https://cors-anywhere.herokuapp.com/http://api.openweathermap.org...

#3

expirement with setting the cache to false on the request