Uncaught error when axios retry is used

[adambullmer]

Version

module: 5.0.0-1613647907.37b1156
nuxt: 2.14.12

Nuxt configuration

mode:

• universal
• spa

Nuxt configuration

export default {
  axios: {
    retry: true,
  },
}

Reproduction

⚠️ without a minimal reproduction we won't be able to look into your issue

Reproducible example: https://codesandbox.io/s/busy-gareth-vewyu

What is expected?

When the native @nuxtjs/axios module is configured for retrying, the auth module should still work on a retried request.

What is actually happening?

An error is thrown on SSR regarding checking the Authorization header. If using nuxt error pages, this will instead render an error page instead of the intended page. This is due to getting a different type config object structure in the headers.

Steps to reproduce

In the above example, just visiting the home page directly by address bar or refreshing the page will yield the server error.

 ERROR  Cannot read property 'Authorization' of undefined             18:50:18

  at RequestHandler._requestHasAuthorizationHeader (server.js:4001:35)
  at interceptor.axios.interceptors.request.use (server.js:3978:28)

Additional information

I believe the root of the bug is here, where deep object accessors don't check that the previous key exists: https://github.com/nuxt-community/auth-module/blob/dev/src/inc/request-handler.ts#L126

I've made a patch locally to not be blocked by a release:

diff --git a/dist/runtime.js b/dist/runtime.js
index 62e6ede5118ed93c1135ff13f40e3682e023842e..a3d9a7d3de48e8ca62fb19a01546c3a6b75e0df7 100644
--- a/dist/runtime.js
+++ b/dist/runtime.js
@@ -813,7 +813,9 @@ class RequestHandler {
     return config;
   }
   _requestHasAuthorizationHeader(config) {
-    return !!config.headers.common[this.scheme.options.token.name];
+    return config.headers.common
+      ? !!config.headers.common[this.scheme.options.token.name]
+      : !!config.headers[this.scheme.options.token.name];
   }
 }
 
diff --git a/dist/runtime.mjs b/dist/runtime.mjs
index d31247774cf349475b81392852771de6995d48c7..9acc35841b61c6a4661571c2961b7f5561741f0e 100644
--- a/dist/runtime.mjs
+++ b/dist/runtime.mjs
@@ -802,7 +802,9 @@ class RequestHandler {
     return config;
   }
   _requestHasAuthorizationHeader(config) {
-    return !!config.headers.common[this.scheme.options.token.name];
+    return config.headers.common
+      ? !!config.headers.common[this.scheme.options.token.name]
+      : !!config.headers[this.scheme.options.token.name];
   }
 }

Checklist

• I have tested with the latest Nuxt version and the issue still occurs
• I have tested with the latest module version and the issue still occurs
• I have searched the issue tracker and this issue hasn't been reported yet

Steps to reproduce

What is expected?

What is actually happening?

Performance analysis?

n/a

[rico-ocepek]

I'm currently experiencing the same error but with a different Nuxt configuration.

Did you discover any workarounds that can be done in userland i.e. that don't require patching the module?

[mattprado21]

@rico-ocepek I also encountered this issue while setting up the auth for local login. For workarounds, use @nuxt/auth which is the previous version on nuxt auth(4.9.1) instead of @nuxt/auth-next.

[bmulholland]

We recently upgraded axios, can you please try the latest auth-next and see if this is resolved?

[bmulholland]

Also, for SSR, please check everything listed in #1197

[lucien-chastan]

Hello,

I have the same problem with a local schema (but only when the user is not connected), I tried to upgrade to version 5.0.0-1643023090.140d3d1 (https://www.npmjs.com/package/@nuxtjs/auth-next/v/5.0.0-1643023090.140d3d1)
The problem persists.

nuxtjs/auth-next: 5.0.0-1643023090.140d3d1
nuxtjs/axios: 5.13.6
nuxt: 2.15.7

[bmulholland]

Are you using SSR? If so, did you follow the debugging steps?

[lucien-chastan]

The problem occurs in an async fetch () when I am disconnected and only when the server renders the page, I can reach the page without problems from the client.

I have trouble getting a verbose debugging trace
I only have this information:

 ERROR  Error in fetch(): Cannot read property 'Authorization' of undefined                                                                                                         14:53:30

  at RequestHandler._requestHasAuthorizationHeader (server.js:11076:35)
  at server.js:11053:28

I am trying to get a clearer error

[bmulholland]

Two problems here:

1. Why is a retry needed? What makes you think the second retry will even work?
2. It seems to me that Axios is "forgetting" the auth header on its retry.

As long as the auth header is set for the first request, neither of those seem to be something that this auth module owns.

[lucien-chastan]

I'm sorry, I misread the original problem.
My Axios is in retry: false

I'm just looking for why I have this header problem when the user is disconnected in ssr and I thought I had the same problem as this post, apparently not.

Sorry for the pollution

[haykkh]

module: 5.0.0-1643791578.532b3d6
nuxt: 2.15.3
@nuxtjs/axios: 5.13.1
axios: 0.26.0

Same issue on my end, but I'm not using axios: { retry: true } (even tried explicitly setting it to false).

Issue doesn't occur when I import axios explicitly for calls, but does when I use nuxt's $axios.

I've checked everything in #1197, I don't think any of them apply to my use case.

On my end it seems to occur when I make requests with custom headers that don't include common

eg this throws the error:

$axios.get(
  url,
  {
    headers: {
      "Custom-Header": "val"
    }
  }
)

this doesn't:

$axios.get(
  url,
  {
    headers: {
      "Custom-Header": "val",
      common: {},
    }
  }
)

Why don't we implement @adambullmer's changes in #1624 (comment)? Seems like checking for parent key's existence is a good idea regardless?