CODEWITHSUNDEEP
jqueryajaxgeocodingweather-api
Phuong T
Phuong T

Reputation: 21

Dark Sky Forecast API does not return data?

I am trying to display weather information fetched from Dark Sky Forecast API in JQuery, for 2 locations (which has lat/lng values retrieved by Geocoding API). I managed to obtain lat/lng data but got denied from the Forecast API. Console log shows error messages as:

GET https://api.forecast.io/forecast/260960a77daa4006fe463ae709efed95/[object%20HTMLInputElement],[object%20HTMLInputElement]' (x)

XMLHttpRequest cannot load https://api.forecast.io/forecast/260960a77daa4006fe463ae709efed95/[object%20HTMLInputElement],[object%20HTMLInputElement]'. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 400.

The code is as follows:

  //Call Geocoding API to find lat/lng value
  $.ajax({
    url:"https://maps.googleapis.com/maps/api/geocode/json?address="+fromLocation+"&key=AIzaSyBeUYP6E-zxXWzTzyvuUtUolGLUWy7Jneg",
    type: "GET",
    success: function(res){
      var fromLat = console.log(res.results[0].geometry.location.lat);
      var fromLng = console.log(res.results[0].geometry.location.lng);

      //call next ajax function
      $.ajax({
        url:"https://maps.googleapis.com/maps/api/geocode/json?address="+toLocation+"&key=AIzaSyBeUYP6E-zxXWzTzyvuUtUolGLUWy7Jneg",
        type: "GET",
        success: function(res){
          var toLat = console.log(res.results[0].geometry.location.lat);
          var toLng = console.log(res.results[0].geometry.location.lng);
        }
      });
    }
  });

  //Call Forecast API for weather value
  $.ajax({
    url:'https://api.forecast.io/forecast/260960a77daa4006fe463ae709efed95/'+fromLat+','+fromLng+"'",
    type: "GET",
    success: function(res){
      console.log(res);
    }
  })

Is there a format error instead of API one? Thanks in advance and sorry for the format.

Upvotes: 2

Views: 2034

Answers (1)

MathBunny
MathBunny

Reputation: 956

This is a general issue due to a cross-domain GET, as you are doing an XMLHttp request from outside the domain of the web-page. If you want to quickly fix this problem, you can use an online proxy service (though not recommended). For example, you would simply stick http://cors.io/?u= in the front of the URL.

Like so: http://cors.io/?u=http://google.ca

You can also look into Cross-Origin Resource Sharing (CORS), which is a W3C specification. That would be the proper way to approach this problem. Also, another solution would be to get rid of the www, as that could target a different domain.

Upvotes: 3

Related Questions