jquery - 定义Content-Type时跨域jQuery AJAX失败

Question

我有一个 ASP.NET WebAPI 客户端，它具有以下配置，允许任何跨域 POST 和 GET 调用:

public static void Register(HttpConfiguration config)
{
    config.EnableCors(new EnableCorsAttribute("*", "*", "GET,POST"));

    // other unrelated configurations
}

我对我的 WebAPI 应用程序进行了 AJAX 调用，但所有调用均失败，并在控制台中显示 CORS 预防消息。

以下 AJAX 请求失败:

$.ajax({
    url: "myserver:8081/User/Get",
    data: {
        "Id": 12
    },
    type: "POST",
    dataType: "json",
    contentType: "application/json; encoding=utf-8"
});

为什么会发生这种情况以及如何解决？

Answer 1

我花了很多时间与 WebAPI CORS“战斗”，突然我明白问题出在 AJAX 调用中。该请求执行成功:

$.ajax({
    url: "myserver:8081/User/Get",
    data: {
        "Id": 12
    },
    type: "POST",
    dataType: "json",
    // contentType: "application/json; encoding=utf-8"
});

根据jQuery.ajax() documentation ，

For cross-domain requests, setting the content type to anything other than application/x-www-form-urlencoded, multipart/form-data, or text/plain will trigger the browser to send a preflight OPTIONS request to the server.

浏览器正在预检请求以查找 CORS header 并发现服务器是否允许跨域请求以及发出真正的请求是否安全。如果请求可以接受，则会发送真正的请求。

浏览器发送预检请求是:

• HTTP 方法不是 GET、POST 或 HEAD；
• 或者如果 Content-Type 不是 application/x-www-form-urlencoded、multipart/form-data 或 文本/纯文本;
• 或者是否设置了任何自定义 HTTP header 。

因此，Chrome 会发送 OPTIONS“预检”请求。只要我在服务器上只允许 POST 和 GET 请求，浏览器就会认为这是 CORS 违规并拒绝请求。

This StackOverflow question与这个问题直接相关，并解释了什么是“预检”请求以及为什么浏览器需要发送它。

解决方案与问题原因一样简单 - 不要在跨域 AJAX 调用中指定 Content-Type。

如果您需要为请求指定自定义 header 或 Content-Type，您可以实现一个允许预检请求的特殊处理程序。 This StackOverflow article描述了如何执行此操作。

我希望它能帮助别人节省时间。