如何通过预检请求从javascript调用REST Web服务？

Question

我试图从javascript本身调用另一个域中的服务.我能够请求跨域服务.但我无法从服务中检索信息.一些我被同一原始政策阻止的方式.请帮我查一下代码中的错误.

我的客户端Javascript代码:

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

服务代码:

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

从代码中,我收到了以下结果.

选项方法请求和响应标头

请求标题:

OPTIONS/SolartisGeoCodeLookUpService/Service/drawRegions HTTP/1.1

主持人:Cross_Domain_IP_Address

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

接受: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_IP_Address

访问控制请求方法:POST

访问控制请求标头:x-pingother

连接:保持活力

Pragma:没有缓存

缓存控制:无缓存

响应标题

HTTP/1.1 200好的

服务器:Apache-Coyote/1.1

Access-Control-Allow-Headers:X-PINGOTHER

连接:保持活力

access-control-allow-origin:Origin_IP_Address

Access-Control-Max-Age:1728000

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

Content-Type:text/plain

内容长度:0

日期:星期四,2013年12月12日12:39:27 GMT

响应缓存标头

缓存中的响应标头

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方法请求和响应标头

请求标题

POST/servicePath HTTP/1.1

主持人:crossDomain_IP_Address

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

接受: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:乒乓球

来源:Origin_IP_Address

连接:保持活力

Pragma:没有缓存

缓存控制:无缓存

内容长度:0

响应标题

HTTP/1.1 200好的

服务器:Apache-Coyote/1.1

内容类型:text/json

内容长度:128

日期:星期四,2013年12月12日12:39:27 GMT

附加信息 从javascript两次调用处理程序方法.在第一次,它出现了"当前应用程序在2" - readyState值.在第二次,它出现了"调用错误Occured 4(readyState值)和状态代码为0(响应状态代码)".第二次响应清楚地说,调用服务已被相同的原始策略停止.但我不知道如何克服这个问题,必须访问资源.请纠正我的代码来帮助我.

Answer 1

与其在 javascript 中处理 X 域调用，不如开发一个应用程序本地的服务来使用其他域中的 Web 服务，然后您可以从 javascript 调用本地服务。

我还建议您使用 jQuery 来执行跨域 Ajax 调用，请参阅此链接： http: //www.pureexample.com/jquery/cross-domain-ajax.html。

无需直接处理 XHR，因为您可以使用 jQuery 来完成此操作。

希望这可以帮助，

问候。