How to invoke REST Webservice from the javascript by Preflight Request?

Question

I am trying to invoke the service which was in another domain from the javascript itself. I could able to request the cross domain service . But I cant retrieve the information from the service. Some how I have been blocked by the same origin policy. Please help me to find the errors in the code.

My Client side Javascript Code :

var requestJsonData;

function crossDomainCall(){  ** It will be called by button click **
    requestJsonData = createCORSRequest('POST', 'IPAddress/servicePath');
    if (requestJsonData){
        requestJsonData.onreadystatechange = handler;
        requestJsonData.send();
    }
    else {
        alert('Cross Domain Call is not invoked');
    }
}

function handler(evtXHR) {
    if(requestJsonData.readyState   ==  4) {
        if(requestJsonData.status   ==  200) {
            var response    =   requestJsonData.responseText;
        }
        else {
            alert(" Invocation Errors Occured " + requestJsonData.readyState + " and the status is " + requestJsonData.status);
        }
    }
    else {
        alert("currently the application is at " + requestJsonData.readyState);
    }
}
function createCORSRequest(method, url){
    var xhr;
        xhr = new XMLHttpRequest();
    if ("withCredentials" in xhr){
        xhr.open(method, url, true);
        xhr.setRequestHeader('X-PINGOTHER', 'pingpong');
    } else if (typeof XDomainRequest != "undefined"){
        xhr = new XDomainRequest();
        xhr.open(method, url);
    } else {
        xhr = null;
    }
    return xhr;
}

Service code :

@OPTIONS
@Path("/servicePath")
@Produces("*/*")
@Consumes("*/*")
public Response corsRequest() {
    Response response   =   null;
    ResponseBuilder builder =   null;
    builder =   Response.ok();
    builder.header("Access-Control-Allow-Headers", "X-PINGOTHER");
    builder.header("Access-Control-Max-Age","1728000");
    builder.header("Access-Control-Allow-Origin","Origin_Ip_Address");
    builder.header("Access-Control-Allow-Methods", "POST, GET, OPTIONS");
    builder.header("Content-Type","text/plain");
    builder.header("Connection", "Keep-Alive");
    response    =   builder.build();
    System.out.println("Exited from Options method");
    return response;
}

@POST
@Path("/servicePath")
@Produces("application/json")
public String drawRegions() {
    System.out.println("Entered inside Post method");
            // Some calculation to arrive jsonObject.
    return jsonObject;
}

From the code, I have received the following as a results.

OPTIONS Method Request and Response Headers

Request Headers :

OPTIONS /SolartisGeoCodeLookUpService/Service/drawRegions HTTP/1.1

Host: Cross_Domain_IP_Address

User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:25.0) Gecko/20100101 Firefox/25.0

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,/;q=0.8

Accept-Language: en-US,en;q=0.5

Accept-Encoding: gzip, deflate

Origin: Origin_IP_Address

Access-Control-Request-Method: POST

Access-Control-Request-Headers: x-pingother

Connection: keep-alive

Pragma: no-cache

Cache-Control: no-cache

Response Headers

HTTP/1.1 200 OK

Server: Apache-Coyote/1.1

Access-Control-Allow-Headers: X-PINGOTHER

Connection: Keep-Alive

access-control-allow-origin: Origin_IP_Address

Access-Control-Max-Age: 1728000

Access-Control-Allow-Methods: POST, GET, OPTIONS

Content-Type: text/plain

Content-Length: 0

Date: Thu, 12 Dec 2013 12:39:27 GMT

Response Cache Header

Response Headers From Cache

Access-Control-Allow-Head... X-PINGOTHER Access-Control-Allow-Meth... POST, GET, OPTIONS Access-Control-Max-Age 1728000 Connection Keep-Alive Content-Length 0 Content-Type text/plain Date Thu, 12 Dec 2013 12:39:27 GMT Server Apache-Coyote/1.1 access-control-allow-original Origin_IP_Address

POST Method Request and Response Headers

Request Headers

POST /servicePath HTTP/1.1

Host: crossDomain_IP_Address

User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:25.0) Gecko/20100101 Firefox/25.0

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,/;q=0.8

Accept-Language: en-US,en;q=0.5

Accept-Encoding: gzip, deflate

X-PINGOTHER: pingpong

Origin: Origin_IP_Address

Connection: keep-alive

Pragma: no-cache

Cache-Control: no-cache

Content-Length: 0

Response Headers

HTTP/1.1 200 OK

Server: Apache-Coyote/1.1

Content-Type: text/json

Content-Length: 128

Date: Thu, 12 Dec 2013 12:39:27 GMT

ADDITIONAL INFO From the javascript two times the handler method has been called. At the First time, It is comeup with "currently the application is at 2" - readyState value. At the Second time, It is comeup with "Invocation Errors Occured 4(readyState value) and status code is 0 (response status code)". The second time response clearly says, invoking the service has been stopped by the same origin policy. But I dont know How to overcome from this problem and have to access the resource. Please help me by correcting my code.

Answer 1

Instead of dealing with X domain calls in javascript, why don't you develop a service local to your application that consumes the web service in the other domain, then you can call you local service from javascript.

I would suggest also, and alternatively, that you use jQuery to perform that Cross Domain Ajax call, see this link: http://www.pureexample.com/jquery/cross-domain-ajax.html.

There is no need to deal with XHR directly since you have jQuery to do it for you.

Hope this helps,

Regards.