XMLHttpRequest 无法加载

Question

需要帮助解决此问题。我们已经尝试了很多不同的方法，但由于某些原因，当尝试访问 keen

时，Access-Control-Allow-Origin 不允许 Origin 错误不断弹出

加载资源失败：服务器返回状态 404（未找到） admin:1 XMLHttpRequest 无法加载 https://api.keen.io/3.0/projects//queries/。预检响应具有无效的 HTTP 状态代码 404

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

这些是我们的 headers 和起源

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

});

Answer 1

消息“预检响应具有无效的 HTTP 状态代码 404”表明服务器未正确处理 OPTIONS 类型的请求。 "Preflight request" 与浏览器首先检查服务器是否接受实际请求有关。例如。如果您的代码是

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

那么现代浏览器首先会发出这样的请求：

OPTIONS http://another-server.com/blah（以及 headers 中的适当值），期望响应 headers 中的特殊值，只有在此之后它才会继续原来的 GET.

有些不可预测，但您可以看到这些 OPTIONS 请求记录在 Chrome/Firefox/IE dev-tools (F12) 的网络部分。

换句话说，该服务不是为支持 CORS 而设计的，就是编码不正确。

Answer 2

只是一些基本的故障排除，我无法在评论中给出。

此代码段执行 simple CORS request which returns a 404 error "resource not found". It then makes a second CORS request with a preflight 失败并出现此错误：

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.

在代码中我们在第二个请求中设置了自定义 header。这会触发预检。我们还使用 try-catch 块在控制台中查看完整的错误（没有这个 Firefox 只显示 NS_ERROR_FAILURE，这不是很有帮助）。

因此，预检 CORS 请求（即 OPTIONS）似乎存在服务器配置错误。

显示然后运行要尝试的代码片段

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>

Answer 3

上面的配置存在一些问题。试一试：

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

XMLHttpRequest 无法加载

XMLHttpRequest cannot load

javascript

header

keen-io