Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Middleware throws `TypeError` when trying to parse FormData

See original GitHub issue

Verify canary release

I verified that the issue exists in Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 21.4.0: Mon Feb 21 20:34:37 PST 2022; root:xnu-8020.101.4~2/RELEASE_X86_64
Binaries:
  Node: 16.13.2
  npm: 8.1.2
  Yarn: 1.22.15
  pnpm: N/A
Relevant packages:
  next: 12.1.6-canary.9
  react: 17.0.2

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

Not sure if I’m doing anything unexpected, but here goes:

`request.formData()` - throws

While trying to parse FormData in a middleware like so:

// pages/_middleware.ts
const handler = async (request: NextRequest, _nfe: NextFetchEvent) => {
    const data = await request.formData();
};

export default handler;

With the following request (application/x-www-form-urlencoded):

curl --request POST \
  --url http://localhost:3000/foo \    
  --header 'Content-Type: application/x-www-form-urlencoded' \
  --data foo=bar

or (multipart/form-data):

curl --request POST \
  --url http://localhost:3000/foo \
  --header 'Content-Type: multipart/form-data; boundary=---011000010111000001101001' \
  --form foo=bar

Next throws the following error:

TypeError: Unrecognized Content-Type header value. 
FormData can only parse the following MIME types: multipart/form-data, application/x-www-form-urlencoded.

`request.json()` - works

Making a similar request but with JSON, using the request.json()-method everything works as expected.

curl --request POST \
  --url http://localhost:3000/foo \
  --header 'Content-Type: application/json' \
  --data '{ "foo": "bar" }'

Expected Behavior

request.formData() to parse and return the data for multipart/form-data and application/x-www-form-urlencoded

To Reproduce

Create a middleware in pages/_middleware.ts

const handler = async (request: NextRequest, _nfe: NextFetchEvent) => {
    const data = await request.formData();
};

export default handler;

Make a request similar to one of these:

curl --request POST \
  --url http://localhost:3000/foo \    
  --header 'Content-Type: application/x-www-form-urlencoded' \
  --data foo=bar

curl --request POST \
  --url http://localhost:3000/foo \
  --header 'Content-Type: multipart/form-data; boundary=---011000010111000001101001' \
  --form foo=bar

Next should throw the following error:

TypeError: Unrecognized Content-Type header value. 
FormData can only parse the following MIME types: multipart/form-data, application/x-www-form-urlencoded.

Issue Analytics

State:
Created a year ago
Reactions:4
Comments:7 (5 by maintainers)

Top GitHub Comments

2reactions

nelodevcommented, May 1, 2022

Is anyone working on this? Can I? Thanks 🙏🏻

1reaction

Kikobeatscommented, Aug 4, 2022

Top Results From Across the Web

Error invalid at parse formdata request at nodejs server

The problem with your code is that the data you are passing is not a valid json and so bodyParser.json() while processing, will...

ExpressJS - Form data - Tutorialspoint

To get started with forms, we will first install the body-parser(for parsing JSON and url-encoded data) and multer(for parsing multipart/form data) middleware.

File uploads using Node.js - CodeForGeek

How to perform file upload? I am going to use express framework and middleware called “multer”. This middleware is designed for handling the...

Form data not showing up in req.body : r/node - Reddit

Express will not parse form data even if your form data does not contain binary data. You need to use a library like...

typeerror: app.use() requires a middleware function - You.com | The ...

app.use(undefined);. and so express is throwing an error because undefined is not a function. Open ...