ExtJS post json data Access-Control-Allow-Origin error

Question

I'm trying to post some json data on Kibana dashboard using ELK containers but I'm getting the error XMLHttpRequest cannot load myUrl. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access. Despite the error, it displays data on Kibana dashboard as the whole json in one string as "message=test", where it must have been only "test".
It is also giving me "failure" alert all the time even though my misparsed json data is sent correctly and displayed on Kibana.

My function is

    sendLog: function()
    {

      Ext.Ajax.request({
           url: url,
           cors: false,
           useDefaultXhrHeader : false,
           method: 'POST',
           params:
           {    
                "message": "test"
           },
           success: function () {
               alert('success');
           },
           failure: function () {
               alert('failure');
           }
       });  
    }

score 0 · Answer 1 · edited May 23 '17 at 12:13

As you already found out, the Ajax request works: the server gets the request and processes it.
Each request is answered with a response by the server (Kibana).
Your browser doesn't allow your application to access that response, because the server did not send back the 'Access-Control-Allow-Origin' header with the appropriate value. That way, the browser assures that malicious javascript cannot load arbitrary data from arbitrary servers throughout the web, unless the server explicitly allows it. This is called CORS, you will find vast resources about this topic on the web.

E.g. further reading: "No 'Access-Control-Allow-Origin' header is present on the requested resource".

You would have to check whether and how you can tell Kibana to send back custom Http Headers with the response.

ExtJS post json data Access-Control-Allow-Origin error

1 Answers1