Question about the Weather App

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?

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.

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

XMLHttpRequest cannot load How Dark Sky users can use the Apple Weather app - Apple Support. 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

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…)

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 How Dark Sky users can use the Apple Weather app - Apple Support. 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.

Chrome has a workaround:

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