Please help! Trouble with Weather API: Access-Control-Allow-Origin

1

Hello All,

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!!!

3

Ok this is how it looks now:

 jQuery(document).ready(function(){
   console.log("Ready!");
    });

function weatherFunction(){
  
  navigator.geolocation.getCurrentPosition(function(position){
      
  var currentLat = position.coords.latitude;
  var currentLon = position.coords.longitude;
    
 var APIkey = "c470d9117220df245654821524d1b0c2";    
 
 var getURL = "https://api.openweathermap.org/data/2.5/weather?lat=" + currentLat + "&lon=" + currentLon + "&APPID=" + APIkey;
      
 getURL = '"'+ getURL +'"';
       
 document.getElementById("getURL").innerHTML = getURL;
          
jQuery.getJSON(getURL, function(data){
  console.log(data);
  document.getElementById("JSON").innerHTML = JSON.stringify(data);
     });
  });    
};

Is that how you meant? I’m still getting the same error even with those changes:

XMLHttpRequest cannot load https://codepen.io/boomerang/iFrameKey-44a864f0-e8a3-020a-4978-50f69561ba26/“https:/api.openweathermap.org/data/2.5/weather?lat=44.483368&lon=-73.21786829999999&APPID=c470d9117220df245654821524d1b0c2”. Response to preflight request doesn’t pass access control check: 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 weatherFunction() is to be called onclick of the button rather than at page load, at least for now.

Thanks for the help so far - any other suggestions?

5

That did it! Yay for forums!

Does that basically mean that the URL for the get request doesn’t need to have quotes around it? I was trying to treat it like a string but it seems I somehow had too many quotes?

Thanks again