Question about the Weather App

1

Hey, I’ve just started coding the weather application, however I ran into a couple of questions:

The navigator.geolocation only works on secure connections, so I can’t work with in locally, I thought about doing an extra request to an API to get the client IP and then send that IP to another API which returns the Geolocation, and then, I can use the darksky API, but I’m not too sure about this approach.

What are your thoughts?

2

i’ve actually never had problems using geolocation in local development (just tested in Chrome and Safari to confirm). It seems that localhost is whitelisted.

3

It asks for permission, but my trouble now, is the damn

XMLHttpRequest cannot load https://api.darksky.net/forecast/blablabla/6.244203,-75.5812119?exclude=hourly,daily,flags. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:3000’ is therefore not allowed access.

And I’m using axios to fetch the data, I don’t understand if I need to have SSL in order to make a request there or what is going on here.

Edit: Just to mention, a request using Postman works perfectly

http://i.imgur.com/U4KzS7E.png?1

4

The issues have been here for a while: https://forum.freecodecamp.com/t/so-who-can-fix-the-project-text/13520

Personally, while location via IP can satisfy the project, I feel like it’s a less desirable method, as a user’s IP location may be inaccurately recorded. See my post above for a workaround (though it doesn’t take into account the difficulty of working locally…)

5

I’m using the Dark Sky (Forecast.io) API, as I said before, I’m able to perform a request from localhost using Postman, but I can’t manage to do it from the browser, I have tried using both, axios and the native fetch API.

componentWillMount() {
  navigator.geolocation.getCurrentPosition(function(location) {
    fetchWeather(location.coords.latitude, location.coords.longitude);
  });
}

With axios:

export const fetchWeather = (lat, lon) => {
  let API_URL = `https://api.darksky.net/forecast/${API_KEY}/${lat},${lon}?exclude=hourly,daily,flags`;
  axios.get(API_URL)
    .then((res) => {
      return res;
    })
    .catch((err) => {
      return err;
    })
}

With fetch:

export const fetchWeather = (lat, lon) => {
  let API_URL = `https://api.darksky.net/forecast/${API_KEY}/${lat},${lon}?exclude=hourly,daily,flags`;
  fetch(API_URL).then(res => {
    return res.json();
  })
}

Yet, I keep getting the same issue:

Fetch API cannot load https://api.darksky.net/forecast/hehenope/6.244203,-75.5812119?exclude=hourly,daily,flags. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:3000’ is therefore not allowed access. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

6

Chrome has a workaround:

7

Sadly, I’ve already tried that, but the error is still there, I think it’s worth mentioning, the error happens with both, Chrome and Firefox (haven’t tried any other browser).

Also, it doesn’t work on JS Bin either https://jsbin.com/jiyabolepa/edit?js,output

I guess I’ll look for another API, Dark Sky seems to bring nothing but trouble, in order to use it I’d have to setup a proxy https://darksky.net/dev/docs/faq#cross-origin too much trouble for simple data.

Here is an interesting repository as well: https://github.com/cloudmu/darksky

8