303 redirection not working with Angular HTTP POST

Question

I am calling an authentication service where I do a $http.post which returns a 303 resonse, redirecting to a get call returning the response.

When I make the post call using Postman, I get the desired response but when I do an angular $http.post call, it returns me a 401 error (which is user not authorized)

Am I missing something while making the angular call? The backend service seems to work fine as it works fine on Postman.

This is how the $http call looks:

$http.post(url, userData).success(function(data, status) {
   //handle success
}.error(function(data, status) {
   //handle error   
});

The url and the user data is constructed absolutely fine in this case.

score 4 · Answer 1 · answered Aug 14 '14 at 13:57

The reason that you get a GET call is that the browser handle the 303 response before the angular can reach that. And the handling sequence is first go to the browser and then go to the angular framework.

So briefly what happens is : you make call to the server --> the server return the 303 response -> your browser handle the 303 and make a request to some url (should be 'location' in the response header) --> the server receive the request and return the 401 authorized response --> again the browser receive the 401 response first but this time the browser redirect the response to the angular --> at last you can receive the data and status inside the error().

The solution for this could be switching to other response status code like 2xx, and you can get the location from the body. Then you can do the redirection manually. If you HAVE to use 303 or other 3xx as the response code I don't think there's any effective solution at this moment because you can't do much to the browser. As far as I know there might be a solution at browser level but don't know when that will happen.

Hope this can help anyone has the similar issue like this although it has been nearly one year since this issue raised.

Some other ref: https://groups.google.com/forum/#!topic/angular/GKkdipdMbdo There's similar solution you can see from the link above.

score 0 · Answer 2 · answered Jan 16 '20 at 14:27

I faced this issue and I found a redirect url in error object after lots of hours struggle.

loginWithLinkedIn() {
    let data = {
        // some kind of information here
    }

    return this.http.get(`https://www.someurl.com/oauth/v2/authorization`).subscribe(res => {
       console.log(res)
    }, err => {
       console.log(err.url) // here is the redirect url
       window.location.href = err.url
    })
}

Note: when you make a request and you get 303 response which is considered as error, that's why we think we are getting error but error contains useful info.

303 redirection not working with Angular HTTP POST

2 Answers2