javascript - Jquery Ajax 请求被调用两次并且第一个请求不在 header 中发送 token

Question

我正在使用 ajax 调用基于 WCF REST 的服务。

ajax 方法在页面加载之前被调用。我希望在 ajax 请求的 header 中发送一个“ token ”。在 fiddler 中，这就是我所看到的:

1.) header 中没有 token 的服务请求。(AJAX 调用失败)2.) 对 header 中带有 token 的同一服务的请求。(AJAX 调用已通过)

在那之后，一切都在 chrome 和 safari 上正常工作。但是在 IE 10 和 Mozilla 上只有一个服务调用。结果，服务调用在 IE 10 和 Mozilla 中失败，因为请求 header 中没有 token 。

这是我调用的方法:

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 服务都托管在本地主机上时，不会出现此问题。在那种情况下，只有一次成功的服务调用。但是有跨域调用的时候有两个AJAX调用。

我的问题是为什么 AJAX 请求没有在第一次尝试时发送 token ？为什么 token 仅在第二次 AJAX 调用中发送？

我们将不胜感激任何形式的帮助。

Answer 1

问题出在 CORS 上。早期，浏览器不允许向与客户端域不同的域发出 ajax 请求，因为这被认为是安全威胁。现代浏览器可以发出跨域 ajax 请求，只要因为服务器与客户端合作。所以这是当浏览器有跨域请求时实际发生的情况:

1.) 首先，浏览器向服务发送“Preflight”请求以从 WCF 服务收集授权信息(在我的例子中，这是一个 header 方法为“OPTIONS”的请求)。作为返回，Web 服务将 Access Control Allow Origin 作为其响应 header 的一部分发送。并且由于此请求而在 fiddler 上显示的错误是 HTTP 500 错误。此 AJAX 请求在数据字段中没有任何内容，因为它只是一种查找 WCF 服务授权详细信息的方法。

2.)Chrome 和 Safari 然后向 Web 服务发出第二个请求，因为它们具有服务的授权详细信息。而 Firefox 和 IE 不喜欢向服务发出第二个 ajax 请求，因为有一个 HTTP飞行前请求的 500 错误。因此，Chrome 和 Safari 都能够与该服务进行通信。

所以解决方案是修改来自 WCF 服务的响应，以防对其发出“预检请求”。我修改了服务发送的响应，以防有“预检请求”发送 HTTP 200确定响应。这允许 IE 和 Mozilla 等浏览器在预检请求之后发送实际请求。

这是我提到的来源之一: http://www.bennadel.com/blog/2327-Cross-Origin-Resource-Sharing-CORS-AJAX-Requests-Between-jQuery-And-Node-js.htm

希望这对面临同样问题的人有所帮助。