Local weather app issue

Code Feedback
1

Hey guys!

Is there anyway to succeed with local weather app anymore? I tried to do it like they suggest it, but it just does not work, because of cross-origin issue.

This is my js:

$(document).ready(function() {
  
  // declare variables
  var latitude = null;
  var longitude = null;

  // use geolocation to get the current position
  function getLocation() {
    var geolocation = navigator.geolocation;
    geolocation.getCurrentPosition(showLocation);
  }
  
  function showLocation(position) {
    latitude = position.coords.latitude;
    longitude = position.coords.longitude;
  }
  
  getLocation();
  
 $.ajax({
   method: 'GET',
   url: 'https://fcc-weather-api.glitch.me/api/current?lat=35&lon=139',
   success: function(response) {
     console.log('It worked!');
   },
   error: function(error) {
     console.log(error);
   }
 })
   
}) // end ready

It’s driving me crazy. What can I do?

2

Hi there, would you mind posting a codepen link so we can debug your issue?

3

Sure thing:

4

So quick note, when writing code that logs to the console, don’t log success or error, log the response OR the actual error message. However have you tried fetching the API’s information with jQuery and not AJAX? If I view https://fcc-weather-api.glitch.me/api/current?lat=35&lon=139 I get a valid response.

The code would be similar to:
$.getJSON("https://fcc-weather-api.glitch.me/api/current?lat=35&lon=139/", function(json) { // Use the response data to do something, responses can be accessed as json["key"] }

I’m not very familar with AJAX and debugging it’s issues but accessing the json response with the code I gave you might make things a bit easier :slight_smile:

5

I tried with darksky api and with fcc-weather api, but I get the same problem:

XMLHttpRequest cannot load https://fcc-weather-api.glitch.me/api/current?lat=35&lon=139. No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

6

I did try with getJSON as well, but maybe I did something wrong. Let me try again and I will get back to you in a few minutes. Thanks or the help, by the way.

7

The cross origin header issue has caused a lot of trouble for a lot of freeCodeCamp users - the solution has been to use a CORS proxy or JSONP. The simpler solution is to put https://cors-anywhere.herokuapp.com/ in front of the API URL.

8

I installed a Chrome plugin for this issue and it seems to help.

9

So glad that helps, but keep in mind that while it disables the effects for you because it’s not really a solution, it’s a work around for one user, that’s why I recommended the proxy so it’s fixed for all users.

10

Ah, just put it in front of the API url. Hm…seems to work. Thanks so much!

11

You put the URL https://cors-anywhere.herokuapp.com/ in front of your API URL and it handles the rest. It’s literally a slight change to the URL. Let us know if you have further questions on using it :slight_smile:

1 Like
12

Got it! Thanks, @anon52159105! I appreciate your help!

1 Like
13

Awesome, glad the issue was resolved. As always be sure to let us know if you need help :slight_smile:

14

Hi @anon52159105,

Now I have a new issue: Too many requests. Sorry to bother you again, but do you think you might help with this?

1 Like
15

Sounds like you got rate limited or the API is overloaded. Give it an hour and tell me if you still have issues.

1 Like
16

You’re a champ @anon52159105

I just ran into this issue uploading my code to CodePen. I added the proxy to the front of my DarSky API call and voila !! works perfectly :slight_smile: :slight_smile: :slight_smile:

thanks for posting
RockLobster7

1 Like