Search code examples
javascriptheaderkeen-io

XMLHttpRequest cannot load


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();

});


Solution

  • 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"
      });
    });