AngularJS $http seems to not respond correctly when I am using CORS

Question

I have an AngularJS application. It sends out requests to another server for data and so there's an OPTIONS request goes out with every $HTTP call.

When I check with fiddler there are two calls. The Options that always returns a 200 OK and then the data call.

However when I check the $HTTP it seems that it's getting the first request ( the options request ) and not getting the second request the one with real data.

Can someone point me in the right direction with this?

Here's one example of the code that is not responding correctly:

 .factory('isUsernameAvailable', function (appConstant, $q, $http) {
    return function (username) {
        var deferred = $q.defer();
        // if (!angular.isDefined(username) || username == null || username == "" || username.length < 6 ) return deferred.resolve();
        var url = appConstant.baseUrl + '/api/user/existsByName';
        $http({
            url: url,
            method: "PUT",
            data: {
                userName: username
            }
        }).then(function (data) {
                // Found the user, therefore not unique.
                deferred.reject("User name is taken");
            }, function (data) {
                // User not found, therefore unique!
                deferred.resolve();
            });
        return deferred.promise;
    }
  })

I expect it to be returning as success or failure depending on if it finds the username. But in this case it always responds as a fail/error.

Here are the requests being made:

OPTIONS http://localhost:3048/api/user/existsByName HTTP/1.1
Host: localhost:3048
Connection: keep-alive
Access-Control-Request-Method: PUT
Origin: http://localhost:2757
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36
Access-Control-Request-Headers: accept, authorization, content-type
Accept: */*
Referer: http://localhost:2757/Auth/register
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8

giving:

HTTP/1.1 200 OK
Server: Microsoft-IIS/8.0
Access-Control-Allow-Origin: http://localhost:2757
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: PUT
Access-Control-Allow-Headers: content-type
X-SourceFiles: =?UTF-8?B?QzpcR1xhYmlsaXRlc3Qtc2VydmVyXFdlYlJvbGVcYXBpXHVzZXJcZXhpc3RzQnlOYW1l?=
X-Powered-By: ASP.NET
Date: Mon, 12 Jan 2015 17:52:12 GMT
Content-Length: 0

Then:

PUT http://localhost:3048/api/user/existsByName HTTP/1.1
Host: localhost:3048
Connection: keep-alive
Content-Length: 35
Accept: application/json, text/plain, */*
Origin: http://localhost:2757
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36
Authorization: null
Content-Type: application/json;charset=UTF-8
Referer: http://localhost:2757/Auth/register
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8

{"userName":"abdddcdefgg@live.com"}

giving:

HTTP/1.1 404 Not Found
Cache-Control: no-cache
Pragma: no-cache
Expires: -1
Server: Microsoft-IIS/8.0
Access-Control-Allow-Origin: http://localhost:2757
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: *
Access-Control-Expose-Headers: X-Custom-Header
X-AspNet-Version: 4.0.30319
X-SourceFiles: =?UTF-8?B?QzpcR1xhYmlsaXRlc3Qtc2VydmVyXFdlYlJvbGVcYXBpXHVzZXJcZXhpc3RzQnlOYW1l?=
X-Powered-By: ASP.NET
Date: Mon, 12 Jan 2015 17:52:12 GMT
Content-Length: 0

The problem is even if the second request returns a 200 when I debug the success and error functions it still goes to the error function all of the time.

Answer 1

You should use JSONP to do cross domain JSON calls. Look at the documentation here: https://docs.angularjs.org/api/ng/service/$http#jsonp. Also, your referring page and the response from the OPTIONS request must have the appropriate CORS headers set or else the browser will refuse to send the request here are the header settings that I use.

Access-Control-Allow-Headers:Content-Type, Authorization, Content-Length, X-Requested-With, Accept, x-csrf-token, origin
Access-Control-Allow-Methods:GET,PUT,POST,DELETE,OPTIONS
Access-Control-Allow-Origin:*

To call $http.jsonp with a PUT request, you would set up a configuration such as

var config = {
 method: 'POST',
 data: { test: 'test' }
};

and then pass that into the $http.jsonp call

 $http.jsonp('http://example.com', config);

Here is more documentation https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS and http://en.wikipedia.org/wiki/JSONP