CODEWITHSUNDEEP
angularjshttpcors
FrobberOfBits
FrobberOfBits

Reputation: 18002

CORS issue with angular $http.post - successful requests result in errors with status 0

I'm using angular to POST to an authentication endpoint; on the server side, I can see the request succeed, and proper CORS headers are set. Angular's origin is http://localhost:9000

On the server side, preflight OPTIONS requests always get a 200 back, so that seems OK.

On the client side, the $http.post always fails with an error code of 0, which from other research suggests something is still wrong with CORS. I've read the spec and tried a number of other answers, yet something is still missing.

Angular POSTs like this:

    $http({
        method: 'POST',
        url: 'http://localhost:3000/auth/login',
        data: {
            username: $scope.username,
            password: $scope.password
        }
    })
    .then(function (response) {
         /* etc. etc. */
    }, function (response) {
        /* This always triggers, with response.status = 0 */
        console.log("ERROR: " + response.data);
        console.log("Status: " + response.status);
        console.log("Status text: " + response.statusText);
        console.log("Headers: " + response.headers);

        $scope.error = 'Something went wrong...';
    });

Using curl to debug what the server is sending back, this is it:

< HTTP/1.1 302 Found
< X-Powered-By: Express
< Access-Control-Allow-Origin: *
< Access-Control-Allow-Methods: GET,PUT,POST,DELETE,OPTIONS
< Access-Control-Allow-Headers: Origin, Content-Type, Accept, Authorization, Content-Length, X-Requested-With
< Access-Control-Allow-Credentials: true
< Set-Cookie: ua_session_token=(blahblah); Path=/
< Location: /
< Vary: Accept
< Content-Type: text/plain; charset=utf-8
< Content-Length: 23
< Date: Mon, 28 Dec 2015 15:08:17 GMT
< Connection: keep-alive

This is why I'm at a loss, as per the specification, the server seems to be doing the right thing?

Here's what the server gets from the client in terms of request headers:

HEADER host localhost:3000
HEADER content-type application/json;charset=UTF-8
HEADER origin http://localhost:9000
HEADER content-length 38
HEADER connection keep-alive
HEADER accept application/json, text/plain, */*
HEADER user-agent Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_2) AppleWebKit/601.3.9 (KHTML, like Gecko) Version/9.0.2 Safari/601.3.9
HEADER referer http://localhost:9000/
HEADER accept-language en-us
HEADER accept-encoding gzip, deflate

UPDATE tried something else with no luck, based on this post. It would seem Access-Control-Allow-Headers is case-sensitive, and angular is sending on the request accept, origin, content-type. I tweaked the server to parrot back the same, with no luck.

Upvotes: 2

Views: 709

Answers (1)

FrobberOfBits
FrobberOfBits

Reputation: 18002

Alright, after applying my head to my keyboard for several hours, I've fixed it.

The answer seems to be that angular really doesn't like getting redirects in response to POST. When I changed the server endpoint to return just a plain auth token as text (the same token it was setting as a cookie anyway) rather than returning a redirect, the angular POST started working like a charm and falling through to the success handler.

Not sure I got deep enough into this to know why angular was behaving in that way; by playing around with it I found that if the redirect the server sent was to a nonexistent (404) URL that this could be replicated, EVEN IF the original POST returned that valid redirect.

Upvotes: 1

Related Questions