title: CORS enabled but response for preflight has invalid HTTP status code 404 when POSTing JSON
body: <p>I've searched thoroughly but cannot find a solution to this issue in my particular circumstance.</p>
  
  <p>Cross-domain service calls using Fiddler (POST) execute correctly and the data is received. However, through the browser (Chrome) I am getting the message 'preflight has invalid HTTP status code 404'</p>
  
  <p>I have a Web API application and have installed CORS and ensured the following is present in the web.config file:</p>
  
  <pre><code>&lt;system.webServer&gt;
      &lt;handlers&gt;
        &lt;remove name="ExtensionlessUrlHandler-Integrated-4.0" /&gt;
        &lt;remove name="OPTIONSVerbHandler" /&gt;
        &lt;remove name="TRACEVerbHandler" /&gt;
        &lt;add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" /&gt;
      &lt;/handlers&gt;
      &lt;httpProtocol&gt;
        &lt;customHeaders&gt;
          &lt;add name="Access-Control-Allow-Origin" value="*" /&gt;
          &lt;add name="Access-Control-Allow-Headers" value="Content-Type" /&gt;
          &lt;add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" /&gt;
        &lt;/customHeaders&gt;
      &lt;/httpProtocol&gt;
  &lt;/system.webServer&gt;
  </code></pre>
  
  <p>Here is the Ajax call: </p>
  
  <pre><code>var secretKey = 'difusod7899sdfiertwe08wepifdfsodifyosey',
      url = 'http://api.intrinsic.co.uk/api/v1/PTS/ActiveDrivers?api_key=098werolllfWnCbPGAuIXVOJidDHRfYcgxImMlxTXopuekXrSOqOWzEAIdeNTWGPQPpyHxgVGsFysGFKPzq';
  
    jQuery.ajax ({
        url: url,
        type: "POST",
        data: JSON.stringify({ secretKey: secretKey}),
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function(data){
            var content = "&lt;table class=\"container\"&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;Driver Number&lt;/th&gt;&lt;th&gt;Timestamp&lt;/th&gt;&lt;th&gt;VRN&lt;/th&gt;&lt;th&gt;Latitude&lt;/th&gt;&lt;th&gt;Longitude&lt;/th&gt;&lt;th&gt;Track Link&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;";
            $.each(data.ActiveDrivers.DriverLocationStatus, function (index, element) {
                content += "&lt;tr&gt;&lt;td&gt;" + element.DriverNumber + "&lt;/td&gt;";
                content += "&lt;td&gt;" + dateFormat(element.Timestamp, "d/m/yy") + " " + dateFormat(element.Timestamp, "h:MM TT") + "&lt;/td&gt;";
                content += "&lt;td&gt;" + element.VRN + "&lt;/td&gt;";
                content += "&lt;td&gt;" + element.CurrentLatitude + "&lt;/td&gt;";
                content += "&lt;td&gt;" + element.CurrentLongitude + "&lt;/td&gt;";
                content += "&lt;td&gt;&lt;a href=\"https://www.google.co.uk/maps/place//@" + element.CurrentLatitude + "," + element.CurrentLongitude + ",15z/\" target='_blank'&gt;Track &amp;raquo;&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;";
            });
            content += "&lt;/tbody&gt;&lt;/table&gt;";
            $( "#result" ).html( content );
        }
    });
  </code></pre>
  
  <p>Obviously, works on the same domain perfectly and, as mentioned, it works using Fiddler.</p>
  
  <p>I'm certain it is the browser's preflight OPTIONS check that is failing for content-type of 'application/json' but I'm not sure how to fix it.</p>
  
  <p>Is there something missing in the web.config file that I should add?</p>
  
  <p>I have tried removing 'content-type' with no affect.</p>
  
  <p>I had hoped <a href="http://www.cesarafonso.pt/2015/02/webapi-with-cors-iis-intercepts-options.html" rel="noreferrer">this article</a> would solve the issue (it seemed promising) but the same error is encountered:</p>
  
  <pre><code>XMLHttpRequest cannot load [URL]. Response for preflight has invalid HTTP status code 404
  </code></pre>