title: c# Web Api with CORS Enabled and the dreaded No 'Access-Control-Allow-Origin' header is present on the requested resource
body: <p>I have a C# Web API project. I created a Controller using the Web API 2 standard. I am trying to enable CORS on only one action, this is what I have:</p>
  
  <pre><code>namespace MyProject.Controllers
  {
      public class MyControllerController : ApiController
      {
          // POST api/mycontroller
          [EnableCors("http://link.myurl.com", "*", "*")]
          public bool Post(MyCustomObject customObject)
          {
              // Function that returns Bool
              return myFunction(customObject);
          }
      }
  }
  </code></pre>
  
  <p>My WebApiConfig.cs looks like this:</p>
  
  <pre><code>// Web API configuration and services
  config.EnableCors(); 
  
  // Web API routes
  config.MapHttpAttributeRoutes();
  
  config.Routes.MapHttpRoute(
       name: "DefaultApi",
       routeTemplate: "api/{controller}/{id}",
       defaults: new { id = RouteParameter.Optional }
  );
  
  // Ignore Null values on JSON Returns
  config.Formatters.JsonFormatter.SerializerSettings = new JsonSerializerSettings { NullValueHandling = NullValueHandling.Ignore };
  config.Formatters.JsonFormatter.SerializerSettings = new JsonSerializerSettings { DefaultValueHandling = DefaultValueHandling.Ignore };
  </code></pre>
  
  <p>Here is the Cross-Domain AJAX call:</p>
  
  <pre><code>$.ajax({
      type: "POST",
      url: 'http://myurl.com/api/mycontroller',
      data: JSON.stringify({ Type: 'TextHere', OtherInfo: 'TextHere' }),
      contentType: "application/json",
      success: function (data) {
      }
  });
  </code></pre>
  
  <p>Based off tutorials such as this one: <a href="http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api#how-it-works" rel="nofollow">http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api#how-it-works</a>, I should have everything properly setup.</p>
  
  <p>I continue to get the following error in Chrome: </p>
  
  <blockquote>
    <p>XMLHttpRequest cannot load <a href="http://myurl.com/api/mycontroller" rel="nofollow">http://myurl.com/api/mycontroller</a>. No
    'Access-Control-Allow-Origin' header is present on the requested
    resource. Origin '<a href="http://link.myurl.com" rel="nofollow">http://link.myurl.com</a>' is therefore not allowed
    access.</p>
  </blockquote>
  
  <p>When I take a look at the calls using Fiddler, I notice that the Pre-flight Origin check goes through fine with Status 200, but when the actual call is made it returns 500. </p>
  
  <p><strong>Interestingly enough, the transactions are committed to the database even though the call failed. It's almost like the Pre-flight Origin check is running through the code when it should just be checking for Allow Origin.</strong></p>
  
  <p>I've tried adding the following to web.config:</p>
  
  <pre><code>&lt;system.webServer&gt;
     &lt;httpProtocol&gt;
       &lt;customHeaders&gt;
         &lt;add name="Access-Control-Allow-Origin" value="http://link.myurl.com" /&gt;
       &lt;/customHeaders&gt;
     &lt;/httpProtocol&gt;
   &lt;system.webServer&gt;
  </code></pre>
  
  <p>If I leave the [EnableCors] line, then I get an error that two values are specified (<a href="http://link.myurl.com" rel="nofollow">http://link.myurl.com</a>) when there can only be one. If I remove the [EnabledCors] line, I get the original error.</p>
  
  <p>If you can't already tell, I'm at a loss here. Ironically it is working (database actions being committed), but the browser thinks its not working and never accepts the JSON return data.</p>
  
  <p>HELP?</p>