title: ajax post works vs. angularjs $http does not work w/ ASP.NET MVC 4
body: <p>I have two projects client side and server side.
  Client side project is pure htmljs. Server side is ASP.NET MVC 4 and Web Api.
  Because there are two projects I need to enable CROS functionality.
  I added into server's <strong>webconfig</strong>:</p>
  
  <pre><code>&lt;system.webServer&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;/customHeaders&gt;
      &lt;/httpProtocol&gt;
  &lt;/system.webServer&gt;
  </code></pre>
  
  <p><strong>Ajax Post version which is working:</strong></p>
  
  <pre><code>$.post(url, appContext).done(
                  function(data, textStatus, jqXHR) {
                      successFn(data, textStatus);
                  })
                  .fail(
                      function(jqXHR, textStatus, err) {
                          errorFn(err, textStatus);
                      });
  </code></pre>
  
  <p><strong>angular $http Post version which is NOT working:</strong></p>
  
  <pre><code> $http({
                  url: url,
                  method: 'POST',
                  params: { appContext: appContext },
                  headers: {
                      'Content-Type': 'application/x-www-form-urlencoded'
                      /*'Accept': 'text/json'*/}
              }).success(successFn).error(errorFn);
  </code></pre>
  
  <p>When I use $http I am getting two errors:</p>
  
  <ol>
  <li>OPTIONS url 405 (Method Not Allowed)  </li>
  <li>POST url 500 (Internal Server Error)</li>
  </ol>
  
  <p>ASP.NET MVC method is</p>
  
  <pre><code>[System.Web.Http.HttpPost]
  public List&lt;Module&gt; GetModules([FromBody]SessionContext appContext)
  {
   return  CreateModules();
  }
  </code></pre>
  
  <p>EDIT:</p>
  
  <p><strong>Angular model's configuration:</strong></p>
  
  <pre><code>var emsApp = angular.module('EmsWeb', ['ui.bootstrap']);
  emsApp.config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider) {
  
      $httpProvider.defaults.useXDomain = true;
      delete $httpProvider.defaults.headers.common['X-Requested-With'];
  }]);
  </code></pre>
  
  <p><strong>Headers of OPTIONS request that I see in browser:</strong></p>
  
  <pre><code>Request URL:http://localhost/EmsWeb/api/ModuleApi/GetModules?appContext=%7B%22globalDate%22%3A%22Mon%2C%2008%20Jul%202013%2013%3A09%3A35%20GMT%22%2C%22userToken%22%3A%22AlexToken%22%7D
  Request Method:OPTIONS
  Status Code:405 Method Not Allowed
  
  Request Headers
  Accept:*/*
  Accept-Encoding:gzip,deflate,sdch
  Accept-Language:en-US,en;q=0.8
  Access-Control-Request-Headers:accept, origin, content-type
  Access-Control-Request-Method:POST
  Connection:keep-alive
  DNT:1
  Host:localhost
  Origin:http://localhost:50463
  Referer:http://localhost:50463/index.html
  User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.116 Safari/537.36
  Query String Parametersview sourceview URL encoded
  appContext:{"globalDate":"Mon, 08 Jul 2013 13:09:35 GMT","userToken":"AlexToken"}
  
  Response Headers
  Access-Control-Allow-Headers:Content-Type
  Access-Control-Allow-Origin:*
  Cache-Control:no-cache
  Content-Length:76
  Content-Type:application/json; charset=utf-8
  Date:Mon, 08 Jul 2013 13:09:35 GMT
  Expires:-1
  Pragma:no-cache
  Server:Microsoft-IIS/7.5
  X-AspNet-Version:4.0.30319
  X-Powered-By:ASP.NET
  </code></pre>
  
  <p>Any ideas why angular way does not work are appreciated?</p>
  
  <p><strong>Update</strong> the issue as it turns out to be quite silly:
  because I used params and instead of data in:</p>
  
  <pre><code> $http({
                  url: url,
                  method: 'POST',
                  params: { appContext: appContext },
                  headers: {
                      'Content-Type': 'application/x-www-form-urlencoded'
                      /*'Accept': 'text/json'*/}
              }).success(successFn).error(errorFn);
  </code></pre>
  
  <p>angular converted to GetRequest. No need for ContentType either.
  so actual code is </p>
  
  <pre><code> $http({method: 'POST',
              url: url,                
              data: appCtx,
          }).success(successFn).error(errorFn);
  </code></pre>
  
  <p>so ALMOST resolved, I see that angular still issues OPTIONS request that fails but post request goes through... </p>
  
  <p>so any ideas on that one are appreciated</p>