OPTIONS prerequisites not processed in jQuery

Question

I have a webpage on localhost: 63342 with a jQuery ajax call on that webpage, to my webservice server on localhost: 55000. In the web service, I set the Access-Control headers.

In the Chrome Developer Tools, Network tab, I see that the OPTIONS subroutine is being sent, and the response header has the following, which looks great.

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

However, the response to the OPTIONS request refers to the error function of my jQuery ajax call. Developer tools show that the browser is preparing POST, but does not work, because it believes that the resource does not have a set of Access-Control-Allow-Origin headers. The browser is not trying to send a POST. Here is the error message from the browser console:

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 #):

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);

, . .

, 6/17/14, 5:38 PM EST

webconfig, , .

Answer 1

, , , Chrome , . , :

... OPTIONS jQuery ajax call. , POST, , , Access-Control-Allow-Origin. POST.

, Microsoft Message Analyzer. , OPTIONS ; OPTIONS; POST webservice (!!!) POST.

, , CORS ( , Chrome), "Not Found", "Bad Request" ( , 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. , webservice www, -, localhost: 63342 localhost: 55000.

Answer 2

, cors jQuery? ajax cors:

jQuery.support.cors = true;