0

Been searching all over for a solution to this problem:

Fetch API cannot load https://api.wunderground.com/api/******/conditions/q/toronto. The 'Access-Control-Allow-Origin' header has a value 'http://www.wunderground.com' that is not equal to the supplied origin. Origin 'http://localhost:3000' is therefore not allowed access. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

const apiKey = '******'
const apiUrl = 'https://api.wunderground.com/api/' + apiKey + '/conditions/q/'

var WeatherApi = {
  get: function(query) {
    return fetch(apiUrl + query).then(function(response) {
      return response.json();
    });
  }
};

  handleClick: function() {
    WeatherApi.get(this.state.text).then(function(data) {
      console.log(data);
    }.bind(this));
  },

So how do I have the server send the header with a valid value?

Daniel A. White
  • 187,200
  • 47
  • 362
  • 445
Banner
  • 583
  • 2
  • 6
  • 19
  • See http://stackoverflow.com/questions/10518913/trying-to-search-wunderground-locations-with-javascript-jquery-and-html – matmo Jul 20 '16 at 01:31
  • It is set to http://www.wunderground.com specifically to only allow that domain, are you sure it is a public api? – Adrian Brand Jul 20 '16 at 01:33
  • I'm sure it is a public api. I got the url from their docs: https://www.wunderground.com/weather/api/d/docs – Banner Jul 20 '16 at 01:35
  • @matmo, Getting the same error when I try the code in the link. – Banner Jul 20 '16 at 01:40
  • Google for CORS. It's a pain. If you are doing this in chrome the preflight request must return a 200. A workaround is using your own server to fetch the data using curl or something – user3791775 Jul 20 '16 at 01:40
  • Looks like I can do something like this: Access-Control-Allow-Origin: http://mozilla.com, just don't know where to put this now. – Banner Jul 20 '16 at 01:43
  • @Banner: No, that is for the server to do, not you. – slebetman Jul 20 '16 at 02:13

1 Answers1

0

These "CORS" requests work off of the OPTIONS verb being sent by the browser, to the server, and the server allowing the Cross-Origin-Requests. While, depending on the API, you can get past the CORS restriction, remember that the browser is complaining, if you can make the same call server side you will not have the issue (at least at the browser level, the API may still require certain headers).

If you MUST do it from the browser then you have to follow tight guidelines that your consuming API must also support to allow access. The RFC below describes the entire OPTIONS verb protocol (called pre-flight in the RFC) and you can always see these play out in Chrome dev. tools and use them to debug the issue.

Most likely your API is expecting some token or maybe a dev.(localhost issue) header you are not supplying.

Here is the RFC link. Section 5.x is the Gem you want so make sure you read ALL of this section...

https://www.w3.org/TR/cors/#syntax

Hope it helps

Edit 1

On your local dev box, in IIS or apache, make sure you supply the "Response Header"

Access-Control-Allow-Origin ---> "https://api.wunderground.com"
Joseph Rosson
  • 334
  • 1
  • 8