Wunderground Autocomplete API error: No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

I have created a GET request using axios in react as follows:

 searchCity: function(){
    return axios.get('https://autocomplete.wunderground.com/aq?query=lond' + '&format=JSON')
  }

However I am presented with the error:

https://autocomplete.wunderground.com/aq?query=lond&format=JSON. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

Even though this is a public api and no access keys or anything are required. Is there another way to get the JSON data from this url?

Answer 1

So I spent around an hour on this! In the end it seems that certain servers do not carry the:

Access-Control-Allow-Origin: *

in their response headers, however some server are compatible with JSONP rather than standard JSON requests. The thing is, though, that the server has to support JSON-P as well. Despite the format=jsonp in the URL, the server is not responding with JSON-P, but with JSON.

In this case it was and it was and the following code works using react-jsonp:

searchCity: function(){
    return jsonp('https://autocomplete.wunderground.com/aq?query=lond', { param: 'cb' }, function (err, data) {
        console.log(data.RESULTS);
    })

More information on this issue was found here:

Unexpected Token : when trying to parse a JSON string