使用 AJAX 的跨域请求中的新 Chrome 版本问题

Question

在旧的chrome版本中，我可以使用jquery ajax向wcf rest服务发布请求，尽管它们不是同一个域，但我向服务器添加了CORS支持，更新到30.0.1599.101版本后，它不再工作。我用休息客户端，野生动物园，IE和火狐进行测试，它们可以工作。此外，仍支持获取请求。代码片段如下，

function getTempValue(pointname, succeed) {
        var data = '{"pointname":"' + pointname + '"}';
        var invoker = new InterfaceInvoker("http://localhost/UCBService/UCBDemoService.svc", "GetPointValue", data, "POST");
        invoker.Invoke(succeed);
    }
function InterfaceInvoker(newUrl, newInterfaceName, newParameter, newRequestType) {
    var url, interfaceName, parameter, requestType;
    this.GetUrl = function () {
    return url;
};
this.SetUrl = function (newUrl) {
    url = newUrl || "no url setted";
};
this.GetInterfaceName = function () {
    return interfaceName;
};
this.SetInterfaceName = function (newInterfaceName) {
    interfaceName = newInterfaceName || "no interface setted";
};
this.GetParameter = function () {
    return parameter;
};
this.SetParameter = function (newParameter) {
    parameter = newParameter;
};
this.GetRequestType = function () {
    return requestType;
};
this.SetRequestType = function (newRequestType) {
    requestType = newRequestType || "no requestType setted";
};
this.SetUrl(newUrl);
this.SetInterfaceName(newInterfaceName);
this.SetParameter(newParameter);
this.SetRequestType(newRequestType);
}
InterfaceInvoker.prototype.Invoke = function (successCallBack, failureCallback) {
    var Type = this.GetRequestType(),
        Url = this.GetUrl() + "/" + this.GetInterfaceName(),
        Data = this.GetParameter(),       
        ContentType = "application/json; charset=utf-8",
        DataType = "json",
        ProcessData = true;
    $.support.cors = true;
 return $.ajax({
 type: Type,
 async: "true",      
        url: Url,                       // Location of the service
        data: Data,                     //Data sent to server
        contentType: ContentType,       // content type sent to server
        dataType: DataType,             //Expected data format from server
        processdata: ProcessData,       //True or False
        timeout: 3000000,                //Timeout setting 
        success: successCallBack || function () { alert("Succeded!") }, //On Successfull service call
        error: failureCallback || function (jqXHR, textStatus, errorThrown) { 
        alert("Failed!" + jqXHR.statusText); }      // When Service call fails
    });
};

回复信息如下，

Request URL:http://localhost/UCBService/UCBDemoService.svc/GetPointValue)
Request Method:OPTIONS
Status Code:405 Method Not Allowed
Request Headersview source
Accept:*/*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:accept, content-type
Access-Control-Request-Method:POST
Cache-Control:max-age=0
Connection:keep-alive
Host:localhost
Origin:http://localhost:51818
Referer:
    http://localhost:51818/HTMLPage1.htm
User-Agent:Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko)       Chrome/30.0.1599.101 Safari/537.36

Response Headers
Access-Control-Allow-Headers:Accept, content-type
Access-Control-Allow-Methods:POST, GET, OPTIONS, DELETE, PUT
Access-Control-Allow-Origin:*
Allow:POST
Cache-Control:private
Content-Length:1565
Content-Type:text/html; charset=UTF-8
Date:Wed, 23 Oct 2013 08:01:23 GMT
Server:Microsoft-IIS/7.5
X-AspNet-Version:4.0.30319
X-Powered-By:ASP.NET

谢谢

Answer 1

也不太确定解决方案（在为我的问题:D寻找解决方案时偶然发现了您的问题），但我找到了链接 （http://praneeth4victory.wordpress.com/2011/09/29/405-method-not-allowed/），这让我认为选项-预检请求在新的 Chrome 版本中不再是可选的，而是强制性的。我会尝试实现对选项请求的答案，看看是否有帮助。

编辑：是的，事实证明这就是问题所在。我添加了

if request.method == "OPTIONS":
    response = Response()
    response.headers.add("Access-Control-Allow-Methods", "GET,POST,PUT,DEL")
    response.headers.add('Access-Control-Allow-Origin', "*")
    response.headers.add('Access-Control-Allow-Credentials', 'true')
    response.headers.add('Access-Control-Allow-Headers', 'Authorization')
    return response

对于我的请求处理方法（仅用于测试，这肯定可以做得更好:D），jQuery不再抱怨。

Answer 2

我最近在帮助朋友时遇到了同样的错误。问题是 Chrome 错误地忽略了失败的预审请求。 这个错误起源于webkit。 但是，您遇到的问题与带有 .net 4.0 的 IIS 7 有关，它在预检选项调用中发送 405。 此问题的解决方法是编写自己的 OPTIONS 请求处理程序。这篇博客文章很好地解释了它。http://evolpin.wordpress.com/2012/10/12/the-cors/

直接取自帖子：

首先，您需要创建一个类来拦截 OPTIONS 并允许它们始终成功 公共类 CORSModule ： IHttpModule { public void Dispose（） { }

    public void Init(HttpApplication context)
    {
        context.PreSendRequestHeaders += delegate
        {
            if (context.Request.HttpMethod == "OPTIONS")
            {
                var response = context.Response;
                response.StatusCode = (int)HttpStatusCode.OK;
            }
        };
    }
}

然后你需要修改你的web.config

<system.webServer>
  <httpProtocol>
    <customHeaders>
      <add name="Access-Control-Allow-Methods" value="POST,GET,OPTIONS" />
      <add name="Access-Control-Allow-Origin" value="*" />
      <add name="Access-Control-Allow-Headers" value="Content-Type,Authorization" />
    </customHeaders>
  </httpProtocol>
  <modules>
    <add name="CORSModule" type="CORSModule" />
  </modules>
</system.webServer>

这将拦截 OPTIONS 请求并返回 200。 请注意，它不安全，您应该添加适当的安全性。 最后，升级到 .net 4.5 被认为是最好的解决方案。