jQuery的Ajax请求调用两次，并在第一次请求不发送令牌头 [英] Jquery Ajax Request Called Twice and the first request does not send token in header

问题描述

我使用Ajax调用WCF基于REST的服务。

I am using ajax to call a WCF REST based service.

AJAX的方法被称为页面被加载之前。 我想在Ajax请求的头发送一个令牌。在提琴手，这是我所看到的：

The ajax method is called before the page gets loaded. I wish to send a "Token" in the header of ajax request. In fiddler this is what I see:

1）的请求服务而不在所述标题中的标记。（AJAX呼叫失败） 2）请求到相同的服务，在标题中的标记。（AJAX调用中传递）

1.)A request to the service without the token in the header.(AJAX Call failure) 2.)A request to the same service with the token in the header.(AJAX Call Passed)

在这之后一切都正常工作的Chrome和Safari。但对IE 10和Mozilla只有一个服务电话。其结果是，服务调用失败在IE 10和Mozilla因为在请求的包头中没有令牌。

After that everything works fine on chrome and safari. But there is only one service call on IE 10 and Mozilla. As a result the service call fails in IE 10 and Mozilla since there is no token in the header of the request.

这就是我所说的方法：

function callservice (method, serviceUrl, params, successHandler, errorHandler) {
    $.ajax({
        crossDomain: true,
        type: method,
        url: serviceUrl,
        beforeSend: function (XMLHttpRequest) { XMLHttpRequest.setRequestHeader("Authorization", Token); },
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: successHandler,
        error: errorHandler
    });
    function photos(data) {
        alert(data);
        console.log(data);
    };
}

我同时控制Web服务和应用程序（它调用这个Web服务）。不会出现此问题，当应用程序和web服务都托管在本地host.In这种情况下，只有一个成功的服务呼叫。但是有些时候，有一个跨域呼叫的两个AJAX调用。

I control both the Web Service and the application(Which calls this Web Service). This problem does not arise when both the application and web service are hosted on the local host.In that case there is only one successful service call. But there are two AJAX calls when there is a cross domain call.

我的问题是，为什么不AJAX请求发送令牌中的第一次尝试？ 又为何令牌得到仅在第二AJAX调用发送？

My question is why doesn't the AJAX request send the token in the first attempt? And why does the token get sent only in the second AJAX call?

任何形式的帮助将大大AP preciated。

Any kind of help will be greatly appreciated.

推荐答案

的问题是与CORS.Earlier，浏览器不允许Ajax请求要作出一个域，它比一个客户端的不同，因为它被认为是安全threat.Modern浏览器可以跨域Ajax请求的，只要共同经营与client.So服务器，这是实际发生的事情时，有从浏览器跨域请求：

The problem was with CORS.Earlier,browsers did not allow ajax requests to be made to a domain which is different than that of a client as it was considered as a security threat.Modern browser's can make cross domain ajax request's as long as the server co-operates with the client.So this is what actually happens when there is a cross domain request from a browser:

1）首先，浏览器发送preflight的要求，以服务来收集授权信息（这与头方法，从WCF服务，在我的情况选项）的要求。作为回报，Web服务向访问控制允许起源作为其响应的一部分header.And显示错误的小提琴手，因为这要求一个结果是HTTP 500 error.This AJAX请求无关的数据字段，因为这只是办法找到WCF服务的授权细节。

1.)First the browser sends 'Preflight' request to the service to gather authorization information(which was a request with the header method as 'OPTIONS' in my case) from the WCF service. In return the Web Service sends Access Control Allow Origin as a part of its response header.And the error being displayed on fiddler as a result of this request was a HTTP 500 error.This AJAX request has nothing in the data field since it was just a way to find the authorization details of the WCF service.

2），Chrome和Safari浏览器再发第二个请求到Web服务，现在他们有service.Whereas火狐的授权细节和IE没有preFER进行第二次Ajax请求的服务，因为有是一个HTTP 500错误为pre-飞行的要求。因此，无论Chrome和Safari都能够与服务进行通信。

2.)Chrome and Safari then made a second request to the Web Service now that they have the authorization details of the service.Whereas Firefox and IE did not prefer to make a second ajax request to the service since there was an HTTP 500 error for the pre-flight request. Hence both Chrome and Safari were able to communicate with the service.

所以，解决办法是修改从WCF服务的情况下，响应有一个preflight要求，以它。我所作修改的服务的情况下发送的响应有一个preflight请求'发送一个HTTP 200 OK响应。这使得像IE和Mozilla浏览器发送preflight请求后，实际的请求。

So the solution was to modify the response from the WCF service in case there is a 'Preflight request' made to it.I modified the response sent by the service in case there is a 'Preflight request' to send an HTTP 200 OK Response. This allowed browsers like IE and Mozilla to send the actual request after the preflight request.

下面是我提到的来源之一： <一href="http://www.bennadel.com/blog/2327-Cross-Origin-Resource-Sharing-CORS-AJAX-Requests-Between-jQuery-And-Node-js.htm" rel="nofollow">http://www.bennadel.com/blog/2327-Cross-Origin-Resource-Sharing-CORS-AJAX-Requests-Between-jQuery-And-Node-js.htm

Here is one of the sources which I referred: http://www.bennadel.com/blog/2327-Cross-Origin-Resource-Sharing-CORS-AJAX-Requests-Between-jQuery-And-Node-js.htm

希望这有助于面临同样的问题的人。

Hope this helps people facing the same problem.

这篇关于jQuery的Ajax请求调用两次，并在第一次请求不发送令牌头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！