Access-Control-Allow-Origin request header field not allowed by Access-Control-Allow-Headers headers in preflight response

Question

I get the following error when trying to load my web page: Request header field. Access-Control-Allow-Origin is not allowed by the Access-Control-Allow-Headers headers in the preflight response.

I examined other answers that answer this problem, and they indicate a lack of CORS support. It is confusing that I have cors support! At least I think I know.

I am trying to connect Zingchart to my Angular JS interface and use an AJAX request to get data from my REST API (on 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)); } }); 

The implementation of the REST API 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 created using this guide: https://www.youtube.com/watch?v=OhPFgqHz68o

Answer 1

Take out the "headers" and "dataType" . Then your request will 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 cause a request before flying.

If you are using Angular, I would highly suggest not using jQuery for AJAX and instead use the Angular built-in $ http service .

I am on the ZingChart team. Holler, if we can help with your charts.