Error 500 and CORS : what's the difference between $http and $window.XMLHttpRequest - angularjs

Question

In one of my angularJS project, i decided to use ng-droplet, which allow me to create drag-n-drop zone to upload images on server via my api.
After setting the plugin, I tried it, but i get :
XMLHttpRequest cannot load http://myapi.com/api/items. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8383' is therefore not allowed access. The response had HTTP status code 500.
Access-Control-Allow-Origin is set to " * " on server side, and i have no problem to do requests on my other api endpoints.
So I tried to see how the plugin create the request and send it, here's how :
$scope.uploadFiles = function uploadFiles() {
// Reset...
$scope.isError = false;
var httpRequest = new $window.XMLHttpRequest(),
formData = new $window.FormData(),
queuedFiles = $scope.filterFiles($scope.FILE_TYPES.VALID),
fileProperty = $scope.options.useArray ? 'file[]' : 'file',
requestLength = $scope.getRequestLength(queuedFiles),
deferred = $q.defer();
// Initiate the HTTP request.
httpRequest.open('post', $scope.options.requestUrl, true);
/**
* #method appendCustomData
* #return {void}
*/
(function appendCustomData() {
if (!$scope.options.disableXFileSize) {
// Setup the file size of the request.
httpRequest.setRequestHeader('X-File-Size', requestLength);
}
// ...And any other additional HTTP request headers, and POST data.
$scope.addRequestHeaders(httpRequest);
$scope.addPostData(formData);
})();
/**
* #method attachEventListeners
* #return {void}
*/
(function attachEventListeners() {
// Define the files property so that each listener has the same interface.
$scope.listeners.files = queuedFiles;
$scope.listeners.deferred = deferred;
$scope.listeners.httpRequest = httpRequest;
// Configure the event listeners for the impending request.
$scope.listeners.progress();
$scope.listeners.success();
$scope.listeners.error();
})();
// Iterate all of the valid files to append them to the previously created
// `formData` object.
$angular.forEach(queuedFiles, function forEach(model) {
formData.append(fileProperty, model.file);
});
// Voila...
$scope.isUploading = true;
httpRequest.send(formData);
return deferred.promise;
};
As you can see, he's not using $http but $window.XMLHttpRequest.
So I tried to do a file upload in a test controller, on the same end point ( http://myapi.com/api/items ), but this time with $http.
Like so :
var fileInput = document.getElementById('uploadedFile');
var file = fileInput.files[0];
var formData = new FormData();
formData.append('title', "rfsdfsd");
formData.append('description', "rfsdfhgfhfgsd");
formData.append('category', 1);
formData.append('price', 20);
formData.append('file', file);
$http.post('http://myapi.com/api/items', formData, {
headers: {
'Content-Type': undefined
}
});
Note the 'Content-Type': undefined, because when i tried this one, it worked ! Files are actually uploaded and i get a 200 response code.
If i change the Content-Type from undefined to "multipart/form-data", or anything else, or if i remove that line, i got the error from above and upload fail.
In the angular documentation, it is said that setting Content-Type to "undefined" explicitly remove the header :
To explicitly remove a header automatically added via $httpProvider.defaults.headers on a per request basis, Use the headers property, setting the desired header to undefined.
It seems that the fact of removing the Content-Type header is part of the reason that it works with $http.
So I also tried with a $window.XMLHttpRequest inside this test controller :
var httpRequest = new $window.XMLHttpRequest();
var fileInput = document.getElementById('uploadedFile');
var file = fileInput.files[0];
var formData = new FormData();
formData.append('title', "rfsdfsd");
formData.append('description', "rfsdfhgfhfgsd");
formData.append('category', 1);
formData.append('price', 20);
formData.append('file', file);
httpRequest.open('post', 'http://myapi.com/api/items', true);
httpRequest.send(formData);
But this one give me the same CORS error as before. I also tried to manually add a Content-Type header like this :
httpRequest.setRequestHeader('Content-Type', undefined);
or
httpRequest.setRequestHeader('Content-Type', null);
or "", " " etc but nothing seemed to work, i always got :
POST http://myapi.com/api/items 400 (Bad Content-Type header value: 'undefined')
So, why does it work with $http and Content-Type set to undefined and how can i modify ng-droplet to make it work ? ( i don't want to rewrite the whole thing using $http instead of $window.XMTHttpRequest).
Why do i get this error when using $window.XMTHttpRequest or $http without Content-Type header or with Content-Type set to anything but undefined ?
Ps : If anyone ask : ng-droplet provides its own way to add POST data, which are needed on the endpoint that i use. Like so :
$scope.interface.setPostData({title: "test", description: 'testetstsetest', price: 20, category: 1});
So it's not the problem source.
EDIT :
I solved it, I forgot that I had an Http Interceptor which automatically add a Authorization header to all the $http requests. The thing that I didn't know was that it wasnt added to $window.XMLHTTPRequest. So I added it manually and now it works.