4mb image file upload gives HTTP 413 error when uploading to production server

I'm trying to upload an image from the client to a server for processing and then on to an S3 AWS bucket. It works great on a local server but not on a live server.

XMLHttpRequest cannot load https://api.parthenon-click.com/img_upload/cover. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://www.parthenon-click.com' is therefore not allowed access. The response had HTTP status code 413.

I'm using ElasticBeanstalk PHP v5.4 for client server and Node v7.0 with Express v4 server for the backend. Client side is simple html/css/jQuery. I grab a photo from a users library and pass it up to the backend using:

    $.ajax({
      url: api_url,
      type: 'POST',
      data: form,
      processData: false,
      contentType: false,
      success: function(data){
          console.log('upload successful!');
      },
      error: function(err){
          console.log(err);
      }
});

This works and saves the image as long as the file is less than 1mb. Though I still get a 504 HTTP error. And it works no matter what the file size is as long as I'm running a local server.

So I tried upping body-parser, htaccess, and multer limits:

Body-Parser:

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

Multer:

var upload = multer({
    storage: storage,
    limits: {
        fileSize: 10000000
    }
})

.htaccess:

php_value upload_max_filesize 30M

My header files are good-to-go for every other type of api request. I set them using:

router.use(function(req, res, next) {
    // do logging
        //set CORS policy to 'allow'
    res.setHeader("Access-Control-Allow-Methods", "POST, PUT, OPTIONS, DELETE, GET");
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

    next();
});

And last, but not least, SSL is enabled on all domain versions.

None of this has solved the problem. What am I missing here?

When using a webserver like Nginx before Node, all requests go through Nginx and are validated by nginx before even reaching Node.js.

Nginx has a configuration file by default located in /etc/nginx/nginx.conf. This file has a lot of default properties for all requests and one of these is client_max_body_size. The default value for that property is 1m, like your 1MB file.

That is also the reason your .htaccess file didn't do anything (Node.js itself never does anything with .htaccess, unless you want it to)

You can manually change it to a different number and that'll be the new max body size for nginx (after reload nginx), but if you want "full" control and have the application check the body size, you can also set it to 0, to disable checking the client request body size.
Setting size to 0 disables checking of client request body size.

Note that changing that property, also changes the max upload size for the PHP requests.

Recommended topics

Hot tags