Why does a cross-domain angularjs $http.post request fail when a XMLHttpRequest succeeds?

Question

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 CORS. A test request with http://test-cors.org from enable cors works as expected. When I do a post request in one of my angular controllers: ``` $http.post(url).success(function(data) { $scope.server_resp = data; }); ``` I get a Request header field Content-Type is not allowed by Access-Control-Allow-Headers 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? XMLHttpRequest When I make the same request using raw XMLHttpRequest, it succeeds. Here are the headers for the XMLHttpRequest: ``` 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…

Accepted Answer

The 'content-type' header is not accepted by the server and is added by default for Angular $http POST request (see $http doc). You can try to remove it from your $http config. Inject $httpProvider in your controller, then this might work:

```
delete $httpProvider.defaults.headers.post['Content-type']
```

You might have to try with 'content-type' also, I'm not sure of the case to use.

Why does a cross-domain angularjs $http.post request fail when a XMLHttpRequest succeeds?

Solution

Problem