Post data via fetch in Vercel Middleware: Worked Before, Failing Now

(edited)

[update] we realized the issue is caused by the fetch behavior changes in recent deployments.

original post

During the recent deployment, We found some issues with the Vercel middleware code. we used jose library's jwtDecode to decode a JWT token and it raised an error [Gt: JWTs must use Compact JWS serialization, JWT must be a string]. however, it didn't happen even for the same code that was deployed before last Friday. I wanna know why this error was raised, didn't Vercel change the runtime for middleware recently?

Vercel Staff

Hi , welcome to the Vercel Community!

Sorry to see you are facing an issue. Could you share the error log here or explain about the code changes you pushed in the failing build commit?

My initial theory is that the code feature might not be part of the Edge Runtime APIs.

Hi dear thanks for your reply. we have some new findings regarding this issue. it looks like the root cause of this issue is actually because we called a fetch in a middleware before using jose to decodeJwt, however, the result of the fetch returns a error saying the requirement params not passing correctly.

we used the code like this:

    const formData = new FormData();
    // .....
   formData.append('grant_type', 'authorization_code');
   const response await fetch(someUrl,  {
        method: 'POST',
        body: formData,
      })

the server responds that the grant_type param is not provided correctly in this case. however it worked well in the previous deployments.

Vercel Staff

Hi , thanks for providing more details. It seems like the API you are calling might have changed their request parameters. Have you confirmed that the API hasn't changed?

Hi No, the API hasn't changed in our case. It also works in the local development environment with the same source code. I noticed the behavior of fetch API in the middleware changed in the new deployment for posting data with data as FormData object.

We did some captures on the server side. and have more information

the following are some screenshots between local dev server and remote deployment

Google Chrome 2025-01-13 16.49.09

Google Chrome 2025-01-13 16.49.16

which means the FormData body is treated as pain text data now. it should be treated as a multiple-part form data payload.

reply to #5

in the above example, the request post payload now turned into

[object FormData]

Vercel Staff

Hi , we're sorry that you're facing this issue.

I see you've a case opened with the support team. They're working to solve this issue for you. Hopefully it gets resolved soon.

This topic is closed. It no longer accepts new replies.

const formData = new FormData(); // ..... formData.append('grant_type', 'authorization_code'); const response await fetch(someUrl, { method: 'POST', body: formData, })