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

Posted 2023-03-04

【中文标题】预检响应中的 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

【发布时间】：2016-04-24 02:06:01

【问题描述】：

我在尝试加载网页时收到以下错误：请求标头字段 Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response。

我查看了响应此问题的其他答案，它们表明缺乏 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

【参考方案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));
    
);

您的标头正在触发预检请求。

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

我是 ZingChart 团队的一员。如果我们可以帮助您制作图表，请大声喊叫。

【讨论】：

谢谢帕特里克！如果内置的 $http 服务效果更好，我会非常乐意使用它。你有什么我可以使用的例子吗？我要做的是使用这个库从后端获取我的数据，然后解析响应，使其符合 Zingcharts 格式要求，我是新手，这听起来对吗？

第一：如果答案解决了您的问题，请采纳。 |听起来不错。我在上面发布的链接有很多关于使用 $http 服务的信息。我们还有一个使用 AJAX 和 Angular 的演示：codepen.io/zingchart/pen/pjerjY

谢谢，我当然会接受你的回答。在开发人员工具中，您的代码给了我以下问题： Uncaught TypeError: Cannot read property 'size' of undefined。你知道为什么会这样吗？

表示data没有一个叫做mem的对象作为属性。

无需删除dataType ...这只是告诉jQuery在repsonse中期望什么，与发送到服务器的内容无关。除非在服务器上为内容类型设置了正确的标头，否则最好继续使用它