Axios Interceptor (Response) doesn't update the header [resubmit]

[farrokh]

Describe the bug

I'm using axios in my nextJS prject. We have a JWT authentication system where I'm trying to use an axios interceptor to update the expired tokens on 401 error.

Some how I cant manage to update the new requests with the updated headers!

To Reproduce

Here is my code:

  axios.interceptors.request.use(
    (config) => {
      const token = session?.accessToken;
      config.baseURL = apiURL;
      config.timeout = 5000;

      config.headers = {
        "Content-Type": "application/json",
        accept: "application/json",
      };
      if (token) {
        config.headers["Authorization"] = "token";
      }
      return config;
    },
    (error) => {
      Promise.reject(error);
    }
  );

  axios.interceptors.response.use(
    (response) => {
      return response;
    },
    function (error) {
      const originalRequest = error.config;
      if (error.response.status === 401 && !originalRequest._retry) {
        originalRequest._retry = true;
        let refresh = session.refreshToken.split(" ")[1];

        return axios
          .post(`account/auth/token/refresh/`, {
            refresh,
          })
          .then((jsonRefreshResponse) => {
            if (jsonRefreshResponse.status === 200) {
              console.log("object", jsonRefreshResponse.data.data.access);
              axios.defaults.headers.common["Authorization"] =
                "FNEL " + jsonRefreshResponse.data.data.access;
              return axios(error.response.config);
            }
          })
          .catch((err) => {
            console.warn(err);
            // signOut({ callbackUrl: "/auth" });
            return Promise.reject(err);
          });
      }
      if (error.config) {
        console.log(error.config);
        // signOut({ callbackUrl: "/auth" });
        return Promise.reject(error);
      }
    }
  );

since I want to receive an error I put token string in the request interceptor. When I console log the process I don't see the updated token in the requests:

Expected behavior

I'm expecting to get an updated request.

Environment

• Axios Version [0.21.4]
• Adapter [XHR/HTTP]
• Browser [Safari]
• Browser Version [91.0.2]
• Node.js Version [14.15.0]
• OS: [OSX 11.5.2]
• Additional Library Versions [next 11.1.0, next-auth 3.23.1]

Additional context/Screenshots

[digitter]

@farrokh
I have a similar issue.
Intercepter doesn't work with Axios Version [0.21.2] in my React app but work with Axios Version [0.21.4]

It seems to have been fixed in the 0.21.3 version.
↓
#4013

[farrokh]

@farrokh
I have a similar issue.
Intercepter doesn't work with Axios Version [0.21.2] in my React app but work with Axios Version [0.21.4]

It seems to have been fixed in the 0.21.3 version.
↓
#4013

Thanks, I'll update it today!

[farrokh]

@farrokh
I have a similar issue.
Intercepter doesn't work with Axios Version [0.21.2] in my React app but work with Axios Version [0.21.4]

It seems to have been fixed in the 0.21.3 version.
↓
#4013

I've just updated to 0.21.4 and still header does not get updated!

[digitter]

@farrokh
How did you update it ?
Is the version of axios in Yarn.lock or package.lock.json 0.21.4?
if it's OK, I’m sorry, but I can't help you.

In my case, I did the following to update.

I manually changed the version of axiox in package.json
and then ran yarn install again.

-    "axios": "^0.21.2",
+    "axios": "^0.21.4",

[farrokh]

@digitter
I used the yarn upgrade axios command. and my package.json is as follows:

{
  "dependencies": {
    "@artsy/fresnel": "^1.7.0",
    "@babel/core": "^7.0.0-0",
    "@fortawesome/fontawesome-svg-core": "^1.2.35",
    "@fortawesome/free-brands-svg-icons": "^5.15.3",
    "@fortawesome/free-solid-svg-icons": "^5.15.3",
    "@fortawesome/react-fontawesome": "^0.1.14",
    "@prisma/client": "^2.25.0",
    "axios": "^0.21.4",
    "csstype": "^2.6.2",
    "dotenv": "^10.0.0",
    "ics": "^2.31.0",
    "lodash": "^4.17.21",
    "mongodb": "^4.1.0",
    "next": "^11.1.0",
    "next-auth": "^3.23.1",
    "nodemailer": "^6.6.3",
    "react": "^17.0.2",
    "react-currency-input-field": "^3.4.1",
    "react-dom": "^17.0.2",
    "react-easy-crop": "^3.5.1",
    "react-hot-toast": "^2.1.1",
    "react-map-gl": "^6.1.16",
    "react-phone-input-2": "^2.14.0",
    "react-query": "^3.16.0",
    "react-select": "^4.3.1",
    "react-simple-star-rating": "^1.0.6",
    "safe-json-stringify": "^1.2.0",
    "sass": "^1.35.0",
    "supercluster": "^7.1.3",
    "thumbor": "^0.1.5",
    "twilio-video": "^2.15.1",
    "typescript": "^4.3.2",
    "use-debounce": "^6.0.1",
    "use-supercluster": "^0.2.9"
  },
  "devDependencies": {
    "eslint": "^7.28.0",
    "eslint-config-next": "^11.0.0"
  }
}

and in my yarn.lock I have this line:

axios@^0.21.1:
  version "0.21.4"
  resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.4.tgz#c67b90dc0568e5c1cf2b0b858c43ba28e2eda575"
  integrity sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==
  dependencies:
    follow-redirects "^1.14.0"

[digitter]

@farrokh
As far as the eye can see the lock file has been updated, the contents in node_modules should also be updated, so there should be no problem.

Another problem or may be referring to node_modules in another directory.

These are my guesses.

[jasonsaayman]

Hi 👋

Please could you retry with the latest version and open a new issue should this error still be relevant?

Thanks