5

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.

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.

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)

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

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

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

Django
  • 343
  • 1
  • 4
  • 23

1 Answers1

6

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.

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

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

Patrick RoDee
  • 1,106
  • 6
  • 9
  • Thanks Patrick! If the built in $http service works better, I'd be more than happy to use it. Do you have any examples I could use? What I will do is use this library to GET my data from the backend and then parse the response so it abides by Zingcharts format requirements, I'm new, does this sound about right? – Django Jan 18 '16 at 20:09
  • First: if the answer solves your problem, please accept it. | Sounds right. The link I posted above has plenty of information about using the $http service. We also have a demo using AJAX with Angular available here: http://codepen.io/zingchart/pen/pjerjY – Patrick RoDee Jan 18 '16 at 20:18
  • Thanks I will of course accept your answer. In developer tools, your code gives me the following issue: Uncaught TypeError: Cannot read property 'size' of undefined. Do you know why this might be? – Django Jan 18 '16 at 20:23
  • That means that data does not have an object called mem as an attribute. – Patrick RoDee Jan 18 '16 at 20:26
  • no need to remove `dataType` ... that just tells jQuery what to expect in repsonse and has nothing to do with what gets sent to server. Unless proper headers are set for content type at server it is better to keep using it – charlietfl Jan 18 '16 at 20:26
  • Thanks to the both of you! – Django Jan 18 '16 at 20:38