设置 header 时 AJAX 请求失败，但没有设置 header 时 AJAX 请求会成功

Question

我有一个 ASP.NET Web API 应用程序在我的本地 IIS 实例上运行。 Web 应用程序配置有 CORS。我调用的 Web API 方法类似于:

[POST("/API/{foo}/{bar}")]
public String DoSomething(String foo, String bar)
{
    return "Hello, World!";
}

客户端，我正在运行以下请求:

$.ajax({
    url: "http://machine/API/Foo/Bar",
    type: "POST",
    success: function (data) {
        console.log("Success: " + data);
    },
    error: function (xhr, status, message) {
        console.log("Failure: " + status + ", " + message);
    }
});

Firefox 15.0.1 中相应的控制台日志如下:

test.html (line 38)
POST http://machine/API/Foo/Bar

200 OK
        112ms   
jquery-1.7.2.js (line 8240)

Success: "Hello, World!"

当我访问本地 IIS 服务器以及让它访问 Visual Studio 中 IIS Express 开发实例的相应 URL 时，此功能可以完美运行。

当我添加单个请求 header (任何内容)时，针对我的本地 IIS 服务器发出时，以下请求会失败:

$.ajax({
    url: "http://machine/API/Foo/Bar",
    type: "POST",
            onBeforeSend: function (xhr, settings) {
                xhr.setRequestHeader("A", "B");
            },
    success: function (data) {
        console.log("Success: " + data);
    },
    error: function (xhr, status, message) {
        console.log("Failure: " + status + ", " + message);
    }
});

我看到的如此详细的日志消息是:

Failure: error, 

在 Visual Studio 中针对 IIS Express 开发实例发出相同的 POST 请求会成功。

在 Fiddler 中，无论我的目标是完整的 IIS 服务器还是 Visual Studio 中的 IIS Express，前两个请求都会顺利完成:

// Request
POST http://machine/Foo/Bar HTTP/1.1
Host: machine
Content-Length: 0

// Response
HTTP/1.1 200 OK
Cache-Control: no-cache
Pragma: no-cache
Content-Length: 38
Content-Type: application/json; charset=utf-8
Expires: -1
Server: Microsoft-IIS/7.5
X-AspNet-Version: 4.0.30319
X-Powered-By: ASP.NET
Date: Tue, 09 Oct 2012 20:16:29 GMT

"Hello, World!"

排列 {With Headers, Without Headers} x {Full IIS, IIS Express} 在 Fiddler 中都会产生相同的输出。

简而言之:为什么设置请求 header 会导致 AJAX 调用对我的本地完全成熟的 IIS 实例失败？

此外，为什么我的请求在 Fiddler 中成功，但在 Javascript 代码中却失败？如果我无法在正确的 IIS 实例中设置请求 header ，这将是一个严重的问题。

Answer 1

这可能与跨源资源共享有关。在最近的一个项目中，我们遇到了类似的情况，并且使用自定义 http header 进行跨源资源共享最终证明是问题所在。

仅当 javascript 的域与正在进行的 ajax 调用的域不同时，才会发生这种情况。

要确定是否属于这种情况，您可以尝试在 Global.asax 中添加类似的内容:

protected void Application_BeginRequest(object sender, EventArgs e)
{
    HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");

    if (HttpContext.Current.Request.HttpMethod == "OPTIONS" )
    {
        //These headers will handle the HTTP OPTIONS call sent by the browser
        HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods" , "GET, POST" );
        HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "A, Foo, Bar");
        HttpContext.Current.Response.End();
    }
}

注意 做这样的事情要小心。将 Access-Control-Allow-Origin header 设置为值“*”存在安全风险。

附加 Material : http://www.w3.org/TR/cors/