I have run into some major headaches trying to access JSON data for the Local Weather Challenge, and I think I have narrowed done the issue to the “Same Origin Policy.” Basically, I am requesting data via CodePen from a different host (api.openweathermap.org) and receiving the following message in my console:
XMLHttpRequest cannot load…No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘https: //s.codepen io’ is therefore not allowed access. The response had HTTP status code 404.
The confusing thing for me is that I get this message even though the API website has does have an Access-Control-Allow-Origin header set to “*” (can see this easily under “Headers” tab if viewed with Firefox: https://api.openweathermap.org/data/2.5/weather?lat=43.6558109&lon=-72.2449919&APPID=c470d9117220df245654821524d1b0c2 - the link is good and my API key works fine).
I have done a lot of looking around online and have had no luck with proxies, adding “?callback=?” to my URL, or running a local version of the page from a .html file and diagnosing the problem that way.
What am I doing wrong?
For what it’s worth, I know the code works because when I make the GET request to a .js file hosted on CodePen (as described here: https://blog.codepen.io/2013/09/23/ajax-codepen/#jquery-example-4), the JSON data shows up just fine. The problem occurs when requesting data from an external host… Sigh.
Here is a link to my pen: https://codepen.io/hburn11/pen/WEyLGp
Thank you for the help - any suggestions are much appreciated!!!