[Express & Nginx] 413 Payload too large 해결

base64 url로 사진을 보내는 로직을 Express, React, Nginx로 구현했는데, 용량이 100kb가 넘는 사진을 업로드해서 서버에 보내려고 하면 413 Payload too large 오류가 발생했다. 인터넷에 있는 방식은 거의 다 해봤는데도 안 돼서 꽤 헤맸지만 결론은 굉장히 허무해서, 나와 같은 문제가 있었던 사람들이 이 글을 참고해서 빨리 해결할 수 있길 바란다.

문제를 해결하기 위해, 우선 nginx.conf 파일을 아래와 같이 수정했다.

http {
    ...
    client_max_body_size 50M;
    ...
}

sudo systemctl restart nginx
pm2 restart server

여전히 오류가 발생했다. (오류 처리 여부와 별개로 저 코드는 추가하는 게 맞긴 하다)

다음으로 Express의 server.js 코드를 수정했다.

app.use(express.json());
app.use(bodyParser.json({ limit: '50mb' }));
app.use(bodyParser.urlencoded({ limit: '50mb', extended: true, parameterLimit: 50000 }));

여전히 안 됐다.

찾아보니 base64 url로 사진을 보내는 경우 bodyParser.text() 메서드를 추가하래서 아래처럼 수정했다.

app.use(express.json());
app.use(bodyParser.json({ limit: '50mb' }));
app.use(bodyParser.urlencoded({limit: "50mb", extended: true, parameterLimit:50000}));
app.use(bodyParser.text({ limit: '200mb' }));

이래도 안 돼서 멘붕이 왔다..

더 찾아보니까 bodyParser의 기능 일부가 express에 통합됐기 때문에 bodyParser 대신 express를 써보라는 글이 있었다.
따라서 bodyParser라고 적힌 부분을 다 express로 변경하고, 이렇게 적으면 app.use(express.json());와 app.use(express.json({ limit: '50mb' })); 는 중복 코드가 되기 때문에 전자쪽을 삭제했다.

app.use(express.json({ limit: '50mb' }));
app.use(express.urlencoded({limit: "50mb", extended: true, parameterLimit:50000}));
app.use(express.text({ limit: '200mb' }));

이렇게 쓰니 해결되었다. (추측컨데 app.use(express.json())과 app.use(bodyParser.json({limit:'50mb'})))에서 express ⊃ bodyParser이므로 app.use(express.json())가 선적용돼서 뒤에 limit 적어둔 게 적용이 안 된 것 같다.)