1

I'm making an API request using this code:

function httpGet(url){
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
    console.log(this.status)
    if (this.readyState == 4 && this.status == 200) {
        console.log("Got names")
       getNamesFromJSONArray(request.responseText);
    };
};
request.open("GET", url, true);
request.setRequestHeader("Authorization", "Basic (API key goes here)");
request.setRequestHeader("Accept-Encoding", "gzip");
request.send();
}

It worked just the other day but now it fails, telling me:

Failed to load resource: Preflight response is not successful

and

XMLHttpRequest cannot load https://api.insight.ly/v2.1/contacts. Preflight response is not successful

Also, "Got names" is never printed.

Why would this code break when it worked just the other day? Is it a problem on the API end or mine?

UPDATE! I found this on the api website. What would be the simplest way to implement this? I currently have no backend and don't need one for anything besides this. I understand the issue is because they don't want my API in client-readable Javascript, which makes sense. Could I log in to the API some other way, perhaps by a user's email and password?

A Tyshka
  • 3,830
  • 7
  • 24
  • 46
  • Sounds like a CORS issue to me. You probably need to send the right access headers. – Obsidian Age Sep 20 '17 at 20:35
  • @ObsidianAge Then why did it work a few days ago? – A Tyshka Sep 20 '17 at 20:38
  • For an explanation of what’s happening here, see https://stackoverflow.com/a/45533146/441757 or https://stackoverflow.com/questions/45586064/receive-oauth2-token-from-xhr-request/45586285#45586285 or https://stackoverflow.com/questions/45210184/why-is-my-drupal-8-cors-setup-not-working/45312903#45312903 (the question marked as a duplicate unfortunately doesn’t have an answer that actually explains at all the behavior for this kind of case, as far as I can see). The gist is: the `https://api.insight.ly/v2.1/contacts` endpoint requires authorization for OPTIONS requests. It shouldn’t. – sideshowbarker Sep 20 '17 at 22:49
  • Because `https://api.insight.ly/v2.1/contacts` requires authorization for OPTIONS requests, there’s nothing you can do to fix it—you’re not going to be able to make requests to that endpoint from frontend JavaScript code running in a browser and get back data from it. If it was working for your previously without any errors, then I guess you can only assume that the `https://api.insight.ly/v2.1/contacts` owners changed the behavior recently (to require authorization for OPTIONS requests I guess), and that’s what broke things for you – sideshowbarker Sep 20 '17 at 22:54
  • @sideshowbarker Thanks for the replies. So basically there is no way whatsoever to access this data without a backend? – A Tyshka Sep 21 '17 at 15:09
  • @ATyshka You could contact the owners and ask them if they could please fix their site. But yeah, if they don’t there’s no way whatsoever to access the data except from backend code. – sideshowbarker Sep 21 '17 at 22:35

1 Answers1

0

The API needs to be able to (correctly) handle CORS, specifically, your question is about preflight.

Before making an actual CORS call, it will try the same call using the OPTIONS method, to make sure it is safe to make it. The server is expected to return certain headers for this.

So yes, this is on the API side.

You can read further details about HTTP access control (CORS)

Octavio Galindo
  • 330
  • 2
  • 9
  • Thanks for the answer! I looked into this and posted an update to my question. Any advice? – A Tyshka Sep 21 '17 at 15:14
  • Seems to me, they have already answered your question. No, you cannot use CORS (You cannot call the API directly), and they already gave you an option, which is to write a proxy. – Octavio Galindo Sep 21 '17 at 16:17