This article stems from a small case at work: a server response with status code 302 cannot be intercepted using AXIos.

Scene description

Many websites have login verification. The process is as follows:

  1. Visit the website url;
  2. When the server finds that the requested Cookie does not contain the login information (usually a Token), it returns a redirected response with status code 302 and writes the redirected address in the Location of the response header. This url is the one we logged in to.
  3. When the browser receives the response, it finds 302 and uses itgetMethod to re-request the login url specified in Location;
  4. After you enter your account and password in the login url, the server will respond againSet-Cookie“, and the browser’s code redirects to the page we first visited.

The above is the most general website login process. Among them, the response of 302 status code is very critical, it directs us to the correct webpage login.

This usually happens when the user enters the address directly into the browser. Recently, I met a situation where, by convention with the backend, I used AXIos to request the backend interface through Ajax. If I found that there was no login, the backend would return a redirection response of 302. Then, AFTER I got the Location address in the response, I would jump to this address to log in.

It seems simple enough, with just three steps:

  1. Send a request;
  2. Determine the status code in the axios response, and if it is 302, get the Location address in the response header.
  3. Use JAVASCRIPT code to control browser jumps.

The actual implementation

The first thing to do is get the response from Axios. Axios uses the following logic to determine the status code of a normal response:

validateStatus: function (status) {
    return status >= 200 && status < 300; // default
}
Copy the code

So change the validation logic so that the 302 status code is considered a normal response:

validateStatus(status) {
    return status >= 200 && status < 300 || status === 302;
}
Copy the code

Then do the processing in the AXIos response:

axios({
    url: '/api',
}).then(res= > {
    const { status, headers: { Location } } = res;
    if (status === 302) {
        window.location.href= Location; }})Copy the code

Nice! Very simple ~

In practice, however, it turns out that the code does not run to axios’ response processing step at all, and instead directly requests the redirected address using the GET method. Presumably this is axios’s default behavior, but a query to the official documentation turns up no configuration to disable this feature. There is only one maxRedirects option, which applies to Nodejs.

The reason for this is that Ajax can’t handle 302 status code responses, which is the default behavior of browsers. By looking at the standard, the standard readyState for Ajax = 2 means that all redirects (if any) have been completed and all response headers have been received:

All redirects (if any) have been followed and all headers of a response have been received.

In Ajax request mode, all the redirection is done by the time the response is received.

Default redirection status code

After testing, all redirection status codes:

  • 301: Moved Permanently
  • 302: Found
  • 303: See Other
  • 307: Temporary Redirect
  • 308: Permanent Redirect

The code can be viewed at Github.

If you have any questions, please feel free to discuss ~ this article started on my blog, please click ~