angularjspreflighthttp-status-code-504

AngularJS OPTIONS request to Web API lost

I am trying to make a post request from AngularJS to WebAPI on a different domain.

$http({
    method: 'POST',
    url: 'http://www.test.com/api/app/controller',
    data: postdata,
    headers: {
        'Content-Type': 'application/json'
    }
})
.then(function(response) {
    // Do stuff
}, function() {
    // Show error
})
.finally(function() {
    // Cancel loading indicator
});

I believe Web API is setup correctly to handle CORS requests. If I make a CORS OPTIONS request using Chrome Advanced REST client, the correct headers and a 200 response code are returned.

When I make the POST call above, a preflight OPTIONS request is made. This always times out with a 504 code. The logging in my Application_BeginRequest is never hit (which it is when calling from Chrome plugin).

What is the difference between calling from AngularJS and the Chrome plugin? Both are being run from the same machine and AngularJS is running in an application on localhost. The same headers are being set in both calls.

Solution

  • This was a stupid mistake on my behalf. I am answering the question (rather than deleting) in case somebody does the same.

    I was pointing to a service containing a typo:

    url: 'http://www.test2.com/api/app/controller',

    Instead of:

    url: 'http://www.test.com/api/app/controller',

    My CORS pre-flight request was working without an issue, it was just never getting to the right server.