飞行前响应中的Access-Control-Allow-Headers不允许请求标头字段Access-Control-Allow-Origin [英] Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response

问题描述

尝试加载网页时出现以下错误:飞行前响应中的Access-Control-Allow-Headers不允许请求标头字段Access-Control-Allow-Origin.

I get the following error in when I try to load a my webpage: Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response.

我查看了其他针对此问题的答案，它们表明缺少CORS支持.令人困惑的是我得到了cors的支持！至少我认为是.

I have looked at other answers that respond to this issue and they indicate lack of CORS support. The confusing thing is that I have cors support! At least I think I do.

我正在尝试将Zingchart连接到我的Angular JS前端，并使用AJAX请求从我的REST API(在本地主机:3000)获取数据

I am trying to connect Zingchart to my Angular JS front end and using an AJAX request to get data from my REST API (at localhost:3000)

这是我的AJAX电话:

Here is my AJAX call:

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实现包括以下内容:

My REST API implementation includes the following:

 // 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

My REST API was built with the help of this tutorial: https://www.youtube.com/watch?v=OhPFgqHz68o

推荐答案

取出"headers"和"dataType".您的请求将如下所示:

Take out the "headers" and "dataType". Your request will then look like this:

$.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));
    }
});

您的标题正在触发预检请求.

Your headers are triggering the preflight request.

如果您使用的是Angular，我会高度建议不要将jQuery用于AJAX，而应使用Angular的

If you're using Angular, I'd highly suggest not using jQuery for AJAX and instead use Angular's built-in $http service.

我在ZingChart团队中. Holler，如果我们可以为您提供图表方面的帮助.

I'm on the ZingChart team. Holler if we can help with your charts.

这篇关于飞行前响应中的Access-Control-Allow-Headers不允许请求标头字段Access-Control-Allow-Origin的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！