Question

需要帮助解决此问题。我们已经尝试了很多不同的东西，但由于某些原因，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"
    });
});

这些是标题和来源

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类型的请求。 “预检请求”涉及如果服务器将接受实际请求，则首先与服务器进行浏览器检查。例如。如果你的代码是

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

然后现代浏览器将首先提出此请求：

OPTIONS http://another-server.com/blah（以及标题中的相应值），期望响应标头中的特殊值，之后才会继续使用原始GET。

有点不可预测，但您可以在Chrome / Firefox / IE开发工具的网络部分（F12）中看到这些OPTIONS个请求。

换句话说，该服务要么不支持CORS，要么没有正确编码。

Answer 2

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

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

Answer 3

只是一些我无法在评论中进行的基本故障排除。

此代码段预先生成simple CORS request，返回404错误“未找到资源”。然后它使用preflight发出第二个CORS请求失败，并显示以下错误：

阻止跨源请求：同源策略禁止读取 https://api.keen.io/3.0/projects/queries处的远程资源。这个可以通过将资源移动到同一域或启用来修复 CORS。

在代码中，我们在第二个请求中设置了自定义标头。这触发了预检。我们还使用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>

XMLHttpRequest无法加载

3 个答案: