Not receiving data from api?

1

Hello,

I’m currently working on the local weather project in the intermediate front end section an have made an API call to get some JSON data. I know the code is working correctly as I have shared my pen with other campers who have run it and received data. However when I try this I do not receive any data. I have tried 2 browsers but had the same problem. Has anyone heard of this kind of issue?

Here is my pen:

When it is run, the data should appear in the console.

Thank you

2

Have you tried to open your developer console (F12 key) and see if there is some restriction or error when you run the pen ?

3

Thank you @caev03

Yes i looked at the developer console and I got this error:

XMLHttpRequest cannot load http://api.openweathermap.org/data/2.5/weather?lat=35&lon=139&appid=d1dbbbdcb93dbf2b6360c25c5291fa87. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://s.codepen.io’ is therefore not allowed access.

However when I shared the pen with other people they could receive the data.
Either way, do you know any way around this? I have an api key which i got from openweathermap.org

4

Try to put this: https://cors-anywhere.herokuapp.com
before http://api.openweathermap.org/data/2.5/weather?lat=35&lon=139&appid=d1dbbbdcb93dbf2b6360c25c5291fa87

Now, Your variable should look like:
var api = 'https://cors-anywhere.herokuapp.com/http://api.openweathermap.org/data/2.5/weather?lat=35&lon=139&appid=d1dbbbdcb93dbf2b6360c25c5291fa87'

5

Yes it works!!

But why? what is https://cors-anywhere.herokuapp.com/? where did you get that from?

And thank you I’ve been stuck with this for hours

6

okay I’ve just read the documentation. Very handy indeed

Thanks