JQuery Ajax 基本身份验证 header 无法正常工作

Question

我正在尝试使用 JQuery 在服务器上发出简单的 GET 请求。

    $.ajax({
        headers: {
            "Authorization": "Basic " + btoa("hello" + ":" + "world")
        },
        url: "http://hello.world?Id=1",
        method: "GET",
        success: function () {
        },
    }).then(function () {
    });

问题是当发送请求时，身份验证 header 没有正确放入请求中:

Host: hello.world
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:43.0) Gecko/20100101 Firefox/43.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: de,en-US;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate
Access-Control-Request-Method: GET
Access-Control-Request-Headers: authorization
Origin: null
Connection: keep-alive
Cache-Control: max-age=0

Answer 1

向另一个来源发送 HTTP 请求时，请求可以是“简单”或“非简单”。如果请求使用其中一个(或两者)，则请求变得不简单

• 除 HEAD、GET 或 POST 之外的 HTTP 动词；或者，
• Accept、Accept-Language、Content-Language 或 Content-Type 以外的请求 header

由于您的请求设置了 Authorization header ，因此它并不简单。

当请求不简单时，浏览器首先使用 OPTIONS 方法发送一个预检 请求。这就是您在问题中看到的请求。 (参见 HTML5 Rocks on preflight requests 和 [我对 How does Access-Control-Allow-Origin header work? 的回答)。预检不包括非简单 header ，但将它们列在 Access-Control-Request-Headers header 中。

如果服务器正确响应预检，浏览器将然后发出真正的请求。在这种情况下，浏览器正在寻找来自服务器的响应 header Access-Control-Allow-Headers: Authorization 以指示非简单的 Authorization header 可以发送实际请求。您的服务器必须在其响应中包含该 header 。