XMLHttpRequest cannot load

Question

Need assistance resolving this issue. We have tried a lot of different things but for some reason the Origin is not allowed by Access-Control-Allow-Origin error keeps popping up when trying to access keen

Failed to load resource: the server responded with a status of 404 (Not Found) admin:1 XMLHttpRequest cannot load https://api.keen.io/3.0/projects//queries/. Response for preflight has invalid HTTP status code 404

here is the code in admin.js

<script type="text/javascript">
    var client = new Keen({
    projectId: "id", // String (required always)
    writeKey: "key", // String (required for sending)
    readKey: "key",      // String (required for querying)

    // protocol: "https",         // String (optional: https | http | auto)
    // host: "api.keen.io/3.0",   // String (optional)
    requestType: "jsonp"       // String (optional: jsonp, xhr, beacon)
});
Keen.ready(function() {
    var metric = new Keen.Query("newBusiness", {
        analysisType: "count",
        timeframe: "this_1_month"
    });

    client.draw(metric, document.getElementById("newBusiness-count-chart"), {
        chartType: "metric",
        label: "Count of Businesses"
    });
});

these our are headers and origins

app.all('*', function (req, res, next) {
res.header('Access-Control-Allow-Origin', 'https://api.keen.io:443, fonts.googleapis.com');
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type, Origin, X-Requested-With, Accept');
res.header('Access-Control-Allow-Credentials', true);
res.header('Access-Control-Allow-withCredentials', true);
next();

});

Do you get the same error with `res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');` ? — Shaun Webb, Mar 17 '16 at 21:38
Yea, I am still recieving the same errors. I tried a couple of different things for the headers but none of them seem to be working. — ghosting999, Mar 17 '16 at 21:51

score 2 · Answer 1 · answered Mar 17 '16 at 21:48

Message "Response for preflight has invalid HTTP status code 404" suggests that the server does not process requests of type OPTIONS properly. "Preflight request" relates to browser checking with the server first if the server will accept the actual request. E.g. if your code is

GET http://another-server.com/blah

then modern browser will first make this request:

OPTIONS http://another-server.com/blah (and, with appropriate values in headers), expecting special values in response headers, only after which it will proceed with the original GET.

Somewhat unpredictable, but you can see these OPTIONS requests logged in Network section of Chrome/Firefox/IE dev-tools (F12).

In other words, that service either isn't designed to support CORS or it's not properly coded.

Up voted, but I'm not convinced that the 404 is a CORS error. The server actually responds with json data saying the resource can't be found. There would not be a response if the request was blocked. So it seems more like a query failure, i.e., a missing parameter, etc. — Yogi, Mar 17 '16 at 23:30

Dustin · Accepted Answer · 2018-06-22T05:33:03.047

There are a few issues w/ the configuration above. Give this a try:

var client = new Keen({
  projectId: "id",
  writeKey: "key",
  readKey: "key",
  requestType: "jsonp"
});

Keen.ready(function() {
  var metric = new Keen.Query("count", {
    eventCollection: "newBusiness", // assuming this is the collection name?
    timeframe: "this_1_month"
  });
  client.draw(metric, document.getElementById("newBusiness-count-chart"), {
    chartType: "metric",
    title: "Count of Businesses"
  });
});

Yogi · Answer 3 · 2016-03-17T23:32:53.350

Just some basic troubleshooting which I couldn't fit in a comment.

This snippet preforms a simple CORS request which returns a 404 error "resource not found". It then makes a second CORS request with a preflight which fails with this error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.keen.io/3.0/projects/queries. This can be fixed by moving the resource to the same domain or enabling CORS.

In the code we set a custom header in the second request. That triggers the preflight. We also use a try-catch block to see the full error in the console (without this Firefox only displays NS_ERROR_FAILURE, which is not very helpful).

Consequently, it seems that there is a server misconfiguration for preflighted CORS requests, i.e., OPTIONS.

Show and then run the code snippet to try

var url = 'https://api.keen.io/3.0/projects/queries'; 
var xhr = new XMLHttpRequest();


try {
  xhr.open('GET', url, false );
  xhr.send();
}
catch(e){}
dump('GET - no preflight');


try {
  xhr.open('GET', url, false );
  xhr.setRequestHeader('X-PREFLIGHT', 'forced');
  xhr.send();
 }
catch(e){ }
dump('GET - with preflight');


function dump(method) {
  window.stdout.innerHTML += (
    'METHOD = ' + method + '\n' +
    xhr.status + ':' + xhr.statusText + '\n' +
    xhr.getAllResponseHeaders() + '\n' +
    xhr.responseText + '\n\n'
  );
};

<xmp id="stdout"></xmp>

XMLHttpRequest cannot load

3 Answers3