`setRequestHeader` fails to execute with source code as a header value, axios and react

Question

I've encountered a very strange problem, implementing axios interceptors for handling the expired token and refreshing it.

Setting

I'm implementing the JWT authentication with access and refresh tokens.

When the request is being sent to the API route that requires JWT authentication, request interceptor is here to make sure the headers contain an Authorization with Bearer token. The response interceptor checks if the new access token is needed, sends a request to refresh it, and finally updates the axios instance with the new config.

I wrote the code following the Dave Gray's video, but with TypeScript.

Problem

When testing this code, I set the refresh token lifetime to be very long, while setting the access token lifetime to be 5 seconds. After it expires, when the request to the protected route is happening, everything goes according to the plan—the logs from the backend contain two successfully completed requests: (1) to the protected route with 401 response and then (2) the refresh request.

At this point, I see the DOMException in the browser console (Chrome and Safari), which states that setRequestHeader fails to execute because a source code function is not a valid header value. Which, of course, it is not! The piece of code is this.

Code

const axiosPrivate = axios.create({
  baseURL: BASE_URL,
  headers: { "Content-Type": "application/json" },
  withCredentials: true,
});

interface IRequestConfig extends AxiosRequestConfig {
  sent?: boolean;
}

const useAxiosPrivate = () => {
  const { auth } = useAuth()!;
  const refresh = useRefreshToken();

  React.useEffect(() => {
    const requestInterceptor = axiosPrivate.interceptors.request.use(
      (config: AxiosRequestConfig) => {
        config.headers = config.headers ?? {};
        if (!config.headers["Authorization"]) {
          config.headers["Authorization"] = `Bearer ${auth?.token}`;
        }
        return config;
      },
      async (error: AxiosError): Promise<AxiosError> => {
        return Promise.reject(error);
      }
    );

    const responseInterceptor = axiosPrivate.interceptors.response.use(
      (response: AxiosResponse) => response,
      async (error: AxiosError): Promise<AxiosError> => {
        const prevRequestConfig = error.config as IRequestConfig;
        if (error?.response?.status === 401 && !prevRequestConfig?.sent) {
          const newAccessToken = await refresh();
          prevRequestConfig.sent = true;
          prevRequestConfig.headers = prevRequestConfig.headers!;
          prevRequestConfig.headers[
            "Authorization"
          ] = `Bearer ${newAccessToken}`;
          return axiosPrivate(prevRequestConfig);
        }
        return Promise.reject(error);
      }
    );

    return () => {
      axiosPrivate.interceptors.request.eject(requestInterceptor);
      axiosPrivate.interceptors.response.eject(responseInterceptor);
    };
  }, [auth, refresh]);

  return axiosPrivate;
};

Error

DOMException: Failed to execute 'setRequestHeader' on 'XMLHttpRequest': 'function (header, parser) {
    header = normalizeHeader(header);
    if (!header) return undefined;
    const key = findKey(this, header);

    if (key) {
      const value = this[key];

      if (!parser) {
        return value;
      }

      if (parser === true) {
        return parseTokens(value);
      }

      if (_utils_js__WEBPACK_IMPORTED_MODULE_0__["default"].isFunction(parser)) {
        return parser.call(this, value, key);
      }

      if (_utils_js__WEBPACK_IMPORTED_MODULE_0__["default"].isRegExp(parser)) {
        return parser.exec(value);
      }

      throw new TypeError('parser must be boolean|regexp|function');
    }
  }' is not a valid HTTP header field value.

Research

So far, I've only found one similar issue in the internet, which has links to some others. One of them gives me a hint, that it may be the problem with how axios reads the configuration given to an axios instance.

I'm not sure if the problem is indeed somewhere in axios. I'll be extremely grateful for any useful thoughts on this problem!

Answer 1

I had the same problem, I solved it by manually giving value to axiosPrivate instead of axiosPrivate(prevRequestConfig).

const responseIntercept = axiosPrivate.interceptors.response.use(
        response => response,
        async (error)=>{
            const prevRequest = error?.config;
            if (error?.response?.status === 403 && !prevRequest?.sent){
                const newAccessToken = await refresh();
                // console.log(prevRequest);
                return axiosPrivate({
                    ...prevRequest,
                    headers: {...prevRequest.headers, Authorization: `Bearer ${newAccessToken}`},
                    sent: true
                });
            }
            return Promise.reject(error);
        }
    );

Answer 2

Thanks to Daniel Dan's solution I could modify Dave's tutorial code:

const responseInterceptor = axiosPrivate.interceptors.response.use(
      (response: AxiosResponse) => {
        return response;
      },
      async (error: AxiosError): Promise<AxiosError> => {
        const prevRequestConfig = error.config as AxiosRequestConfig;
        if (error?.response?.status === 401 && !prevRequestConfig.sent) {
          prevRequestConfig.sent = true;
          const newAccessToken = await refresh();

          /* --- The modified line --- */
          prevRequestConfig.headers = { ...prevRequestConfig.headers };
          /* ------------------------- */

          prevRequestConfig.headers[
            "Authorization"
          ] = `Bearer ${newAccessToken}`;
          return axiosPrivate(prevRequestConfig);
        }
        return Promise.reject(error);
      }
    );

Answer 3

Just Do This in your response interceptor

const responseInterceptor = axiosPrivate.interceptors.response.use(
  (response: AxiosResponse) => response,
  async (error: AxiosError): Promise<AxiosError> => {
    const prevRequestConfig = error.config as IRequestConfig;
    if (error?.response?.status === 401 && !prevRequestConfig?.sent) {
      const newAccessToken = await refresh();

      prevRequestConfig.sent = true;
      prevRequestConfig.headers["Authorization"] = `Bearer ${newAccessToken}`;

      return axiosPrivate({
        ...prevRequestConfig,
        ...{
          headers: prevRequestConfig.headers.toJSON(),
        },
      });
    }
    return Promise.reject(error);
  }
);

When re-sending the request with updated creds, i.e axiosPrivate(config), the headers property needs to be a plain javascript Object but instead it is converted internally to be an AxiosInstance object.

To fix it, just pass a plain Javascript object to the headers property of your prevRequestConfig object.