afterResponse hook not working with preflight requests

[Nikhil-Vats]

I am using the afterResponse to check if the user's token is expired to redirect them to sign out page -

afterResponse: [
  async (_input, _options, response) => {
    if (response.status === UNAUTHORIZED_ERROR_CODE) {
      UserDetails.remove();
      const response = await apiClient
        .delete(endpoints.AUTH.SIGNOUT)
        .then(() => {
          window.location.replace(routes.signin);
        });
      return response;
    }
    return response;
  },
],

This is working when I test in security disabled browser mode to avoid CORS issue but when I am testing in the default mode of chrome, there is an additional preflight request that browser sends and even though the main request returns 401, the hook never runs. What can I do to make the hooks run with requests that have an additional preflight request?

[sindresorhus]

The afterResponse hook only runs when the actual request completes. if it doesnt run with CORS preflight requests, its likely because:

the preflight request is failing
check the Network tab - if the OPTIONS request fails (CORS error), the main request never gets sent, so no hook runs.

or the server isnt handling preflight correctly:
the server needs to respond to OPTIONS requests with proper CORS headers:

• Access-Control-Allow-Origin
• Access-Control-Allow-Methods
• Access-Control-Allow-Headers

or network error during preflight:
if theres a network error before the main request, hooks wont execute.

to debug, check the Network tab for:

OPTIONS /api/endpoint (status 200 or 204 = good)
GET/POST /api/endpoint (your actual request)

[llaz00]

Would it be possible to create another hook for preflight errors? Angular HttpClient also throws an error for these requests. It's really useful for app-wide error messages.

Edit: related with #508 #605 #296