Show the Local Weather: API issue

Hey all - I’m having some issues getting my app for “Show the Local Weather” working.

In order to get the geolocation tool from the earlier lessons working in CodePen, I have to use https://, but in order to use the recommended OpenWeatherMap, I have to use http://.

Right now, I’m getting the following console error:

Access to Font at ‘https://production-assets.codepen.io/assets/telefon/bold/af889c53-1ee3-4868…50-3-b7a87e0fbd213943fae0c0ef5985635dd43fa9c24876b2725127a13ccaf4ab6a.woff’ from origin ‘https://codepen.io’ has been blocked by CORS policy: The ‘Access-Control-Allow-Origin’ header has a value ‘http://codepen.io’ that is not equal to the supplied origin. Origin ‘https://codepen.io’ is therefore not allowed access.

Here’s my pen: https://codepen.io/kvosswinkel/pen/GrGwrr

Has anyone else experienced this issue? Is there another API that would work better? Thanks everyone,

Kait

1 Like

this is how I solved it:

http://codepen.io/EgoDominusVos/pen/ggQjyp.js

1 Like

OpenWeatherMap supports https

Does it? I’m getting an error every time I try, but it works fine with http.

I ended up switching to the Weather Underground API when I ran into http/https issues. As an added bonus, you can drop the browser based geolocation and do both geolocation and weather data collection with one API call, since Weather Underground can do geolocation based on the requesting IP address.

2 Likes

Hi!

I had the same problem and solved it switching to Apixu API

:palm_tree:

1 Like

The openweather API was working fine for me on codepen today while I was developing the local weather app, and then suddenly it stopped with the same http/https issue described here.

I’ve noticed some general flakiness with codepen, so this looks like an intermittent issue. @ZackWard thanks for the Weather Underground tip; I’ll give that a shot, myself, if the openweather problem doesn’t clear itself up. I don’t want to spend a bunch of time updating my object references for a new api after having gotten the app working, but I’ll probably get sick enough of the app not working eventually to fix it someday.

1 Like

For anyone else stuck on this, I think I discovered the issue. CodePen works using both http and https. Accessing CodePen via http will (for now) allow the API to work without issue. Using https, however, will cause the issue @k-vosswinkel describes.

Check it out.

Works: http://codepen.io/twistofreality/full/jBEgqB/
Doesn’t work: https://codepen.io/twistofreality/full/jBEgqB/ (note that 28°F is hard-coded in my pen)

I think a part of the issue is that the URL for the example within the challenge uses http

My API calls worked fine when I created it after having visited the example.

The link to “CodePen.io” immediately above it on the challenge page, however uses https, so visiting it later made it seem like it was an intermittent issue.

For whatever it’s worth, there’s an open Issue on GitHub describing the problem with scores of comments and suggestions. Just click “Bug” within the challenge and then select “Browse other issues with this challenge” and you’ll find several references to the problem.

1 Like