Thanks @OnlineProxy-io, this is new to me. I've tried this within Axios interceptors, yet it doesn't work and is still doing two requests. I've set maxRedirects to zero, yet Axios still follows redirects.

My code below:

import axios, { isAxiosError } from "axios";

import { getAPIUrl } from "./options";
import { redirectDocument } from "react-router";

const api = axios.create({
  baseURL: getAPIUrl(),
  withCredentials: true,
  // Also disable automatic redirects since it's a SPA. We must listen to backend when to
  // redirect to the login page when unauthenticated.
  maxRedirects: 0,
});

api.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    if (isAxiosError(error)) {
      if (error.response?.data?.location) {
        redirectDocument(error.response.data.location);
      } else {
        throw error;
      }
    } else {
      return Promise.reject(new Error(`Unprocessed Axios error in interceptor found: ${error.toString()}`));
    }
  },
);

export default api;

One interesting discovery: Axios comes with 3 adapters. maxRedirects is only implemented for the http adapter, but not for the xhr one. Sources:

• https://github.com/axios/axios/blob/v1.9.0/lib/adapters/http.js#L440
• https://github.com/axios/axios/blob/v1.9.0/lib/adapters/xhr.js

Why is XHR ignoring maxRedirects?

PS: this old discussion confirms it #3924 (comment)

XMLHttpRequest, which is used under the hood, always follows redirects, and its API has no way to control this behavior. maxRedirects is supported only by the http adapter. The fetch adapter doesn't implement it (yet?), but you can pass a proprietary fetch API option redirect: 'manual' to disable redirects.

const api = axios.create({
  baseURL: getAPIUrl(),
  withCredentials: true,
  adapter: 'fetch',
  fetchOptions: {
    redirect: 'manual'
  },
  validateStatus: (status) => status >= 200 && status < 400
});

Thanks, @DigitalBrainJS, I wonder why this isn't mentioned in the official Axios documentation. It says there is maxRedirects, but not that it's limited to some adapters only.

Secondly, I wonder if setting the maxRedirects to zero is a bad design idea? Because when the server tells the client to do a redirect, then the client should always follow it, no matter whether it's an SPA or not. How would you implement it on the client side properly? What do you think?