Access-Control-Allow-Origin error requesting data from darksky.net

Question

I'm trying to get info from "darksky.net" using their api.

var xhr = new XMLHttpRequest();
    xhr.open(method, url, true);
        xhr.onload = function() {
            if (this.status >= 200 && this.status < 300) {
                resolve(xhr.response);
            } else {
                reject({
                    status: this.status,
                    statusText: xhr.statusText
                });
            }
        };

Please answer only in pure javascript.

Answer 1

From darksky FAQ, you should setup a proxy server for the API call.

Sorry about pure javascript. It's just not possible.

Why do I get the error No 'Access-Control-Allow-Origin' header is present on the requested resource when I try to call the API?

We take security very seriously at Dark Sky. As a security precaution we have disabled cross-origin resource sharing (CORS) on our servers.

Your API call includes your secret API key as part of the request. If you were to make API calls from client-facing code, anyone could extract and use your API key, which would result in a bill that you'd have to pay. We disable CORS to help keep your API secret key a secret.

To prevent API key abuse, you should set up a proxy server to make calls to our API behind the scenes. Then you can provide forecasts to your clients without exposing your API key.

Answer 2

The problem is in the backend side. You need to web api adjustment for Cors

Answer 3

I have recently run into the same error. An alternative to following their suggested documentation is to use jsonp when making your request. This worked for me and allowed me to circumvent the CORS restriction.

Here is a link to a stackoverflow question regarding how to make jsonp requests with ajax. Basic example of using .ajax() with JSONP?

Good luck!