Error: request entity too large / body-parser deprecated undefined extended : 개발일지

Full Stack MERN Project

 

Full Stack MERN Project - Build and Deploy an App | React + Redux, Node, Express, MongoDB

 

풀스택 MERN 프로젝트를 수행하기위해, 동영상 강의를 들으며 코드를 써내려가던중, 강사의 화면에서는 정상적으로 동작하는데, 내 화면에서는 동작하지 않는 현상을 종종 볼수 있었습니다. 강의영상이 만들어진 시점 이후에 업데이트된 내용이 있거나, 개발환경에 다르거나, 오타가 있거나, 등의 다양한 이유였고, 이를 해결해 나가는 과정에서 많은 것을 배웠습니다. 

 

 

이중 좀 특이한 에러가 있었는데. 원인을 찾기 위해 전체 영상을 3-4번 돌려보았고, 부분 반복은 10번도 넘게했고. 

개발 환경도 몇번씩 확인했고, 오타와 띄어쓰기까지 확인했지만 원인을 찾지 못했습니다.

 

코린이가 매번 벽에 부딪히는게 당연하다지만. 정말 속 많이 상했습니다. ㅠㅠ

 

이를 해결하기위해 장시간 고민했고, 수없이 검색했던 내용을 비슷한 에러를 만난 분들을 위해 공유하며,

나중에 내게 또 다시 비슷한 에러가 왔을때, 참조하기 위해 본 내용을 기록합니다.

 

발견된 몇가지 증상과 디버깅 과정의 변화: 

 정보를 입력하고 전송해도, 폼에 입력한 정보가 DB에 업데이트 되지 않는 현상.

 수정한 정보가 업데이트 되지 않는 현상.

 첨부파일 없이 전송하면 업데이트가 된다. 

 원인이 첨부파일의 크기가 문제라는걸 찾아냄.

 

1차 수정

Server > index.js 안에 설정된 bodyParser관련 설정

 

수정전:

// app.use(bodyParser.json({ limit: '50mb extended: true' }));             // 에러

 

// app.use(bodyParser.urlencoded({ limit: '50mb extended: true'  }));   // 에러

 

 

수정후:

app.use(bodyParser.json({ extended: true }));

app.use(bodyParser.urlencoded({ extended: true }));

 

에러: body-parser deprecated undefined extended

참조링크: StackOverflow

express throws error as `body-parser deprecated undefined extended`

 

결과

1차 수정을 통해, 생성과 업데이트는 가능해졌으나, 첨부파일을 올릴 경우, 에러가 발생했다.

 

2차 수정

 

수정전:

app.use(bodyParser.json({ extended: true }));

app.use(bodyParser.urlencoded({ extended: true }));

 

 

수정후:

app.use(express.json({limit: '50mb'}));

app.use(express.urlencoded({limit: '50mb'}));

 

에러: Error: request entity too large 

참조링크: StackOverflow

Error: request entity too large

결과

첨부파일과 함께 새로운 글을 생성/업데이트 할 수 있게 수정됨.

 

최종 수정시 참조한 원문

[edit - found the solution]
After some research and testing, I found that when debugging, I added app.use(express.bodyParser({limit: '50mb'}));, but after app.use(express.json());. Express would then set the global limit to 1mb because the first parser he encountered when running the script was express.json(). Moving bodyParser above it did the trick.
That said, the bodyParser() method will be deprecated in Connect 3.0 and should not be used. Instead, you should declare your parsers explicitly, like so :

app.use(express.json({limit: '50mb'}));
app.use(express.urlencoded({limit: '50mb'}));

In case you need multipart (for file uploads) see this post.

[second edit]
Note that in Express 4, instead of express.json() and express.urlencoded(), you must require the body-parser module and use its json() and urlencoded() methods, like so:
var bodyParser = require('body-parser'); app.use(bodyParser.json({limit: '50mb'})); app.use(bodyParser.urlencoded({limit: '50mb', extended: true}));
If the extended option is not explicitly defined for bodyParser.urlencoded(), it will throw a warning (body-parser deprecated undefined extended: provide extended option). This is because this option will be required in the next version and will not be optional anymore. For more info on the extended option, you can refer to the readme of body-parser.

[third edit]
It seems that in Express v4.16.0 onwards, we can go back to the initial way of doing this (thanks to @GBMan for the tip):
app.use(express.json({limit: '50mb'})); app.use(express.urlencoded({limit: '50mb'}));

Thanks Samuel Bolduc

User Samuel Bolduc

 

Full Stack MERN Project