CODEWITHSUNDEEP
nginxbrowser
Jamie
Jamie

Reputation: 143

Browsers not receiving / interpreting 413 response from Nginx

I have an Angular 2 app that is using ng2-file-upload to upload files to a server running Nginx. Nginx is definitely sending a 413 when the file size is too large but the browsers (Chrome and Safari) don't seem to be catching it / interpreting it.

Chrome console error:

XMLHttpRequest cannot load <url>. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '<url>' is therefore not allowed access. The response had HTTP status code 413.

Safari console error

XMLHttpRequest cannot load <url>. Origin <url> is not allowed by Access-Control-Allow-Origin.

Nginx config

server {
  listen 80;

  server_name <url>;

  access_log /var/log/nginx/access.log main;

  client_max_body_size 4m;

  location / {
    proxy_pass http://<ip address>:3009;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
  }
}

Nginx access log

<ip address> - - [11/Oct/2016:17:28:26 +0100] "OPTIONS /properties/57fbab6087f787a80407c3b4/floors HTTP/1.1" 200 4 "<url>" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 Safari/537.36" "-"
<ip address> - - [11/Oct/2016:17:28:36 +0100] "POST /properties/57fbab6087f787a80407c3b4/floors HTTP/1.1" 413 601 "<url>" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 Safari/537.36" "-"

Nginx error log

2016/10/11 17:28:26 [error] 30847#0: *1489 client intended to send too large body: 34865919 bytes, client: <ip address>, server: <server>, request: "POST /properties/57fbab6087f787a80407c3b4/floors HTTP/1.1", host: "<host>", referrer: "<url>"

When calling the ng2-file-upload error handling method the response code is 0 and headers are an empty object.

Any help would be much appreciated!

Upvotes: 7

Views: 1224

Answers (2)

lng
lng

Reputation: 84

A similar question was also posted here. As pointed out by the accepted answer:

The problem is that most HTTP clients don't read the response until they've sent the entire request body. If you're dealing with web browsers you're probably out of luck here.

I recently tried with the latest version of Safari (v15.6 - 17613.3.9.1.5) and it does handle the error as I expected. It aborts uploading file when right after receiving the 413 code from the server.

In this case, I agree with @AppHandwerker's answer that we should validate the file size on client side before starting upload.

Upvotes: 0

AppHandwerker
AppHandwerker

Reputation: 1788

Seems like an old question, but even sader that in 2019 it's still the case that Firefox & chrome don't handle the 413 as you would expect. The continue to process the upload despite nginx sending a 413.

Good old Safari (words I don't get to utter often) appears to be the only modern browser that does what you would expect and if you send a custom 413 error it handles it.

In regard to this question, you can use Angular to get the size of the file and have simple endpoint that verifies if it's to big before you send the actual file.

Doing that in JS would b the best option.

Upvotes: 2

Related Questions