413 (Request Entity Too Large) on Heroku w/ Node.JS and Create-React-App BuildPack

Question

I've been scrambling the interwebs for the past 3 days, seemingly running in circles with no solution.

We've been building the application on a locally, with create-react-app and an Express.js backend. There are no issues with uploading files (of any type) on the local instance. We've since deployed to Heroku, having separate dynos for the frontend and the backend, using a proxy. As it stands, there is no nginx.conf file that can be located. Everything says we're running nginx, but no editable config file. Despite this, when trying to upload on the Heroku deployed site, a Failed to load resource: the server responded with a status of 413 (Request Entity Too Large) error is triggered when making the POST request.

I've tried adding:

  // Body Parser Middleware
  app.use(bodyParser.json({ limit: "500mb" }));
  app.use(
    bodyParser.urlencoded({
      limit: "500mb",
      extended: true,
      parameterLimit: 5000000
    })
  );

We use Multer for multipart uploads which is what this concerns (uploading files, specifically audio files)

That's as follows:

const maxSize = 50 * 1024 * 1024; //30 MB

/*
Profile Upload
*/
const upload = multer({
  storage: storage,
  limits: { fileSize: maxSize, fieldSize: maxSize }
});

Furthermore, in the static.json for the frontend React.js side, the following has been added:

{
"max_body_size": "50m",
}

Every solution suggested on both Stackoverflow and Github has been attempted. Are we missing something here? To simulate the error for yourself: https://www.trakz.co/upload w/ email as tester@gmail.com and password as testpass

Answer 1

I fixed the problem on the backend written in Node.js and Express.js by increasing the limit of json . You can refer to this snippet of code below for your reference:

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

For Express v4.16.0+ then you use express.json else you can use bodyparser

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