Question

我在localhost：63342上有一个网页，在该网页上有一个jQuery ajax调用，在localhost：55000上我的webservice服务器。在Web服务中，我设置了Access-Control标头。

在Chrome的开发者工具“网络”标签中，我可以看到OPTIONS预检活动已发送，响应标题包含以下内容，看起来很棒。

Access-Control-Allow-Headers:x-requested-with, X-Auth-Token, Content-Type, Accept, Authorization
Access-Control-Allow-Methods:POST, OPTIONS, GET
Access-Control-Allow-Origin:*
Cache-Control:private
Content-Length:0
Date:Fri, 06 Jun 2014 13:30:58 GMT
Server:Microsoft-IIS/8.0

但是，对OPTIONS请求的响应会触发我的jQuery ajax调用的错误函数。开发人员工具向我显示浏览器准备POST，但是因为它认为资源没有设置Access-Control-Allow-Origin标头而失败。浏览器不会尝试发送POST。以下是来自浏览器控制台的错误消息：

XMLHttpRequest cannot load http://localhost:55000/webservice/ws.svc/CreateOuting. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63342' is therefore not allowed access.

就好像jQuery干扰了OPTIONS，POST过程。关于我应该做些什么来使这项工作的任何想法？

这是我的ajax电话

    $.ajax({
        type: 'POST',
        data: JSON.stringify(obj),
        headers: { "Content-type": "application/json" },
        url: base_url + 'CreateOuting',
        crossDomain: true,
        success: function (an_outing) {
                $('#listviewOutings').listview('refresh', true);
                $('#boxOutingName')[0].value = '';
                myLib.OpenBasicPopup('Success', 'The outing name was saved.')
        },
        error: function (err) {
            alert(err.statusText); // response to OPTIONS request ends up here
        }
    });

以下是我在服务器上设置方法的标头（.NET C＃）：

public bh_Outing CreateOuting(string strOuting) {
    try
    {
        //for all cors requests  
        WebOperationContext.Current.OutgoingResponse.Headers.Add("Access-Control-Allow-Origin", "*");
        //identify preflight request and add extra headers  
         if (WebOperationContext.Current.IncomingRequest.Method == "OPTIONS")
          {
            WebOperationContext.Current.OutgoingResponse.Headers.Add("Access-Control-Allow-Methods", "POST, OPTIONS, GET");
            WebOperationContext.Current.OutgoingResponse.Headers.Add("Access-Control-Allow-Headers", "x-requested-with, X-Auth-Token, Content-Type, Accept, Authorization");
            return null;
          }

        // do stuff

以下是该方法的界面。我不认为它是完美的，但我也不认为它的问题。

[WebInvoke(UriTemplate = "*", Method = "*", ResponseFormat = WebMessageFormat.Json)]
[OperationContract]
bh_Outing CreateOuting(string strOuting);

谢谢你看看这个。我真的被卡住了。

更新，2014年6月17日，美国东部时间下午5:38

我在this post中添加了一个元素到我的webconfig，这对我的结果没有任何改变。

Answer 1

这可能不是原因，但您是否尝试过在jQuery中启用cors？在任何cors ajax请求之前：

jQuery.support.cors = true;

Answer 2

导致我发布上述问题的问题的原因似乎是Chrome错误地代表了真正发生的事情。正如我上面所写，发生的事情是：

...对OPTIONS请求的响应命中了我的错误函数 jQuery ajax调用。开发人员工具向我展示了浏览器的准备工作 POST，但失败了，因为它认为资源没有 Access-Control-Allow-Origin标头集。浏览器不会尝试发送POST。

为了尝试获取更多详细信息，我安装并使用了Microsoft Message Analyzer。它显示OPTIONS请求正在发送; OPTIONS的回复正在发送; POST请求被发送回webservice（!!!）并且正在发送POST响应。

这是一个巨大的突破，因为现在，我没有尝试解决CORS问题（Chrome开发人员工具显示的错误消息），而是开始努力解决“未找到”问题。然后是＆＃34;错误请求＆＃34;错误（MS Message Analyzer显示的错误消息）。

我使用的另一种技术帮助很多，我在网络服务中设置了跟踪。跟踪将事件写入日志文件，该文件默认在事件查看器中打开，并提供了解决（实际）问题所需的详细信息。以下是我在webconfig中添加启用跟踪的内容。

  <system.diagnostics>
    <trace autoflush="true" />
    <sources>
      <source name="System.ServiceModel"
              switchValue="Critical, Error, Warning"
              propagateActivity="true">
        <listeners>
          <add name="myListener"
              type="System.Diagnostics.XmlWriterTraceListener"
              initializeData= "c:\logs\ServiceModelExceptions.svcLog" />
        </listeners>
      </source>
    </sources>
  </system.diagnostics>

我没有对CORS设置（jQuery和web.config）进行任何更改，现在它在Chrome中运行良好。另外，我在www上有web服务，所以它是真正的跨域，而不仅仅是localhost：63342到localhost：55000。

选项预检未在jQuery中处理

2 个答案: