title: Ajax json post to Controller across domains, "not allowed by" Access-Control-Allow-Headers
body: <p>I create a simple MVC Controller action, that takes some json data - then return true or false. </p>
  
  <pre><code>    [AllowCrossSiteJson]
      public JsonResult AddPerson(Person person)
      {
              //do stuff with person object
             return Json(true);
      }
  </code></pre>
  
  <p>I call it from javascript:</p>
  
  <pre><code>        function saveData(person) {
              var json = $.toJSON(person); //converts person object to json
              $.ajax({
                  url: "http://somedomain.com/Ajax/AddPerson",
                  type: 'POST',
                  dataType: 'json',
                  data: json,
                  contentType: 'application/json; charset=utf-8',
                  success: function (data) {
                      alert("ok");
                  }
              });
          }
  </code></pre>
  
  <p>Everything works as long as I am on the same domain, but as soon as I call it from another domain, I run into problems.</p>
  
  <p>On the controller is an action filter "AllowCrossSiteJson" that sets the header "Access-Control-Allow-Origin" to "*", allowing any origin to access the controller action.</p>
  
  <pre><code>public class AllowCrossSiteJsonAttribute : ActionFilterAttribute
  {
      public override void OnActionExecuting(ActionExecutingContext filterContext)
      {
          filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Origin", "*");
          base.OnActionExecuting(filterContext);
      }
  }
  </code></pre>
  
  <p>However - I then get this error in firebug, when calling across domains:</p>
  
  <blockquote>
    <p>OPTIONS <a href="http://somedomain.com/Ajax/AddPerson?packageId=3" rel="noreferrer">http://somedomain.com/Ajax/AddPerson?packageId=3</a> 500 (Internal Server Error)
    XMLHttpRequest cannot load <a href="http://somedomain.com/Ajax/AddPerson" rel="noreferrer">http://somedomain.com/Ajax/AddPerson</a>. Request header field Content-Type is not allowed by Access-Control-Allow-Headers.</p>
  </blockquote>
  
  <p><strong>What is wrong here?</strong></p>
  
  <p>I have been looking through possible solutions for hours, and it seems to be something to do with jquery using OPTIONS (not POST as I would expect). </p>
  
  <p>If that is indeed the problem, how can I fix that?</p>