预检响应中的 Access-Control-Allow-Headers 不允许请求 header 字段 Access-Control-Allow-Origin

Question

我在尝试加载我的网页时收到以下错误：请求 header 字段 Access-Control-Allow-Origin 不允许 Access-Control-Allow-Headers 在预检响应中。

我查看了对这个问题做出回应的其他答案，它们表明缺乏 CORS 支持。令人困惑的是我有cors支持！至少我觉得是。

我正在尝试将 Zingchart 连接到我的 Angular JS 前端并使用 AJAX 请求从我的 REST API（在 localhost:3000）获取数据

这是我的 AJAX 电话：

window.feed = function(callback) {
    $.ajax({
        type: "GET",
        dataType: "json",
        headers: {
            Accept: "application/json",
            "Access-Control-Allow-Origin": "*"
        },
        url: "http://localhost:3000/readings",
        success: function (data) {
            var mem = data.mem.size/10000;
            var tick = {
                plot0: parseInt(mem)
            };
            callback(JSON.stringify(tick));
        }
    });

我的 REST API 实现包括以下内容：

 // CORS Support
 app.use(function(req, res, next) {
   res.header('Access-Control-Allow-Origin', '*');
   res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
   res.header('Access-Control-Allow-Headers', 'Content-Type');
   next();
 });

我的 REST API 是在本教程的帮助下构建的：https://www.youtube.com/watch?v=OhPFgqHz68o

Answer 1

取出"headers"和"dataType"。您的请求将如下所示：

$.ajax({
    type: "GET",
    url: "http://localhost:3000/readings",
    success: function (data) {
        var mem = data.mem.size/10000;
        var tick = {
            plot0: parseInt(mem)
        };
        callback(JSON.stringify(tick));
    }
});

您的 headers 正在触发预检请求。

如果您正在使用 Angular，我 强烈建议 建议不要将 jQuery 用于 AJAX，而是使用 Angular的built-in $http service.

我在 ZingChart 团队。如果我们可以帮助您制作图表，请大声说。

预检响应中的 Access-Control-Allow-Headers 不允许请求 header 字段 Access-Control-Allow-Origin

Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response

ajax

rest

cors

angularjs

zingchart