Why is the $fetch interceptor not modifying the request headers when there's a body?

[cmgdragon]

I'm trying to write a refresh token logic using $fetch interceptors along with the retry option.

The idea is to refresh a JWT every time a request returns a 401 Unauthorized response.

In my implementation this is handled through the onRequest –which modifies the request adding the required token to the headers– and onResponseError –where the token gets refreshed if the response code is 401.

If I do a simple GET request, everything seem to work as expected: the request token is added to the headers, and the moment the token expires it's auto-refreshed and refetched so the whole process ends to be transparent to the user.

The problem comes when I try to make a POST, PUT, etc., request that includes a body. At first it seem to work, in each request the token is being added to the headers; BUT, for some reason, when the token expires and gets refreshed, in the next retry the request headers aren't being updated.

I tried to debug inside the onRequest interceptor to see if the token it's truly being updated, and yes, it is; but the request keeps the old token anyways.

Here's the code: https://stackblitz.com/edit/nuxt-starter-jcgqeq?file=app.vue

There you can see how the token isn't being updated in the ssr terminal when the POST includes a body, but it's actually being updated in the onRequest interceptor (open the devtools to see it)

The expected behavior is that the headers are modified when the fetch retries the request, adding the refreshed token to the headers, but I don't know if I'm missing something and I couldn't find a solution to this problem anywhere., so I'm begging for help this time 🙏🙏