After extensive searching, it seems we are encountering a problem with cross-domain requests using $http in Angular. Our server is set up to allow the domain and returns a 200 status code for successful requests. However, when an error occurs on the server side (such as 500 or 401), Angular mistakenly identifies it as a CORS issue.
I used Fiddler to check the response from the server and confirmed that it indeed returns a 500 error. Despite this, Angular fails to handle the error correctly.
Below is the request being made:
var params = {
url: "fakehost/example",
method: 'GET',
headers: {
"Authorization": "Basic encodedAuthExample"
}
};
$http(params).then(
function (response) { // success
},
function (error) { // error
// error.status always shows as 0 instead of displaying the actual error message
});
When checking the console, I encounter the following error:
XMLHttpRequest cannot load fakehost/example. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'mylocalhost:5750' is therefore not allowed access.
Contrary to this, Fiddler reveals the true response:
HTTP/1.1 500 Internal Server Error
Cache-Control: no-cache
Pragma: no-cache
Content-Type: application/json; charset=utf-8
Expires: -1
Server: Microsoft-IIS/7.5
X-AspNet-Version: 4.0.30319
X-Powered-By: ASP.NET
Date: Tue, 26 Aug 2014 12:18:17 GMT
Content-Length: 5683
{"errorId":null,"errorMessage":"Index was outside the bounds of the array.","errorDescription":"Stack trace here"}
The AngularJS version being used is v1.2.16