title: Why does a cross-domain angularjs $http.post request fail when a XMLHttpRequest succeeds?
body: <p>I am trying to exercise the Trello API with an application key and token from an angular (version 1.0.5) webapp. The server seems correctly configured to handle <a href="http://en.wikipedia.org/wiki/Cross-origin_resource_sharing">CORS</a>. A test request with <a href="http://test-cors.org">http://test-cors.org</a> from <a href="http://enable-cors.org/">enable cors</a> works as expected.</p>
  
  <p>When I do a post request in one of my angular controllers:</p>
  
  <pre><code>$http.post(url).success(function(data) {
    $scope.server_resp = data;
  });
  </code></pre>
  
  <p>I get a <em>Request header field Content-Type is not allowed by Access-Control-Allow-Headers</em> error. (Even though, as you see below, the Access-Control-Allow-Origin is set to '*'). Why is this header added and can it be removed?</p>
  
  <h2>XMLHttpRequest</h2>
  
  <p>When I make the same request using raw XMLHttpRequest, it succeeds. Here are the headers for the XMLHttpRequest:</p>
  
  <pre><code>Request Method:POST
  Status Code:200 OK
  
  Accept:*/*
  Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
  Accept-Encoding:gzip,deflate,sdch
  Accept-Language:en-US,en;q=0.8
  Connection:keep-alive
  Content-Length:0
  Host:api.trello.com
  Origin:http://192.168.0.125:9000
  Referer:http://192.168.0.125:9000/
  User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1364.172 Safari/537.22
  
  Response
  Access-Control-Allow-Methods:GET, PUT, POST, DELETE
  Access-Control-Allow-Origin:*
  Cache-Control:max-age=0, must-revalidate, no-cache, no-store
  Content-Length:563
  Content-Type:application/json
  Date:Mon, 18 Mar 2013 02:49:37 GMT
  Expires:Thu, 01 Jan 1970 00:00:00
  X-Powered-By:Express
  X-Server-Time:1363574977568
  </code></pre>
  
  <h2>Angular $http.post</h2>
  
  <p>Here are the headers for the angular initiated request. Note that the browser made a pre-flight OPTIONS request:</p>
  
  <pre><code>Request Method:OPTIONS
  Status Code:200 OK
  
  Accept:*/*
  Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
  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
  Host:api.trello.com
  Origin:http://192.168.0.125:9000
  Referer:http://192.168.0.125:9000/
  User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1364.172 Safari/537.22
  
  Response
  Access-Control-Allow-Methods:GET, PUT, POST, DELETE
  Access-Control-Allow-Origin:*
  Content-Length:0
  Content-Type:text/html; charset=utf-8
  Date:Mon, 18 Mar 2013 02:51:00 GMT
  X-Powered-By:Express
  </code></pre>
  
  <p>Is there a way to configure angular's request headers to allow the above $http.post() code to work?</p>