XMLHttpRequest cannot load http://localhost:8089/jquery. Origin null is not allowed by Access-Control-Allow-Origin

Question

I am trying to hit a webservice from jquery(ajax) using chrome. But when i try to invoke webservice i am getting below error and it is not even reaching the server

Error :XMLHttpRequest cannot load http://tomohamm-t420:8089/jquery. Origin null is not allowed by Access-Control-Allow-Origin.

Below is a sample ajax call which i am using: //Build W/S-Request query as String object..

var id = '123';

var query = '<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:sch="http://www.tibco.com/schemas/jQuerySample/jquery/Schema.xsd"';
query += '<soapenv:Header/';
query += '<soapenv:Body';
query += '<sch:EmpDetailsRequest';
query += '<sch:empID' + id + '</sch:empID';
query += '</sch:EmpDetailsRequest';
query += '</soapenv:Body';
query += '</soapenv:Envelope';

// set end point url..
var endpointUrl = 'http://tomohamm-t420:8089/jquery';

//ajax call to W/S..
$.ajax({
    url : endpointUrl,
    type : "POST",
    beforeSend : function(xhr) {
    xhr.setRequestHeader("SOAPAction", "/GetEmpByID");
},
data : query,
dataType : "xml",
contentType : "text/xml; charset=\"utf-8\"",
complete : function(xmldata,stat,response) {
    console.log("W/S-Response: "+xmldata.responseText);
},
success : function(data) {
    console.log('W/S Successful!');
},
error : function(textStatus, errorThrown) {
    console.log('W/S Failed!');
    console.log('Error Status :: ' +textStatus);
    console.log('Error Message :: ' +errorThrown);
}
});

I found a way to avoid this issue. That is i have to open chrome using the below command: cd C:\Program Files (x86)\Google\Chrome\Application Chrome.exe --disable-web-security

But this cannot be done on every machine which tries to open my application. So is there anyway to include this setting inside jquery application so that i can directly open chrome and run it?

Aaron Aaron · Accepted Answer · 2013-11-07T02:33:49

I guess you are making ajax calls from a local file, right? If you want to do this some server side coding are needed.

Try this in you server side where you process the ajax request and send the response, adding the Access-Control-Allow-Origin header to the HTTP response and set the value to *. Here's a piece of Java code for your information.

response.setHeader("Access-Control-Allow-Origin", "*")

XMLHttpRequest cannot load http://localhost:8089/jquery. Origin null is not allowed by Access-Control-Allow-Origin

2 Answers