#nginx #browser
#nginx #браузер
Вопрос:
У меня есть приложение Angular 2, которое использует ng2-file-upload для загрузки файлов на сервер под управлением Nginx. Nginx определенно отправляет 413, когда размер файла слишком велик, но браузеры (Chrome и Safari), похоже, не улавливают / не интерпретируют его.
Ошибка консоли Chrome:
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
XMLHttpRequest cannot load <url>. Origin <url> is not allowed by Access-Control-Allow-Origin.
Конфигурация Nginx
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
<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
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>"
При вызове метода обработки ошибок ng2-file-upload код ответа равен 0, а заголовки представляют собой пустой объект.
Любая помощь будет высоко оценена!
Ответ №1:
Кажется, это старый вопрос, но еще печальнее, что в 2019 году Firefox и chrome по-прежнему не обрабатывают 413, как вы ожидали. Продолжают обрабатывать загрузку, несмотря на то, что nginx отправляет 413.
Старый добрый Safari (слова, которые я не часто произношу), по-видимому, является единственным современным браузером, который делает то, что вы ожидаете, и если вы отправляете пользовательскую ошибку 413, он обрабатывает ее.
Что касается этого вопроса, вы можете использовать Angular для получения размера файла и иметь простую конечную точку, которая проверяет, является ли она большой, прежде чем отправлять фактический файл.
Выполнение этого в JS было бы лучшим вариантом.
Комментарии:
1. Эта проблема все еще остается в 2022 году. Я попытался загрузить большой файл, который превышает настроенный
client_max_body_size
в Nginx. Даже если Nginx уже ответил кодом 413 (что я мог подтвердить в журналах сервера), Chrome все равно пытался продолжить процесс загрузки. Затем это закончилосьERR_CONNECTION_CLOSED
, тогда как Safari (или даже Postman) немедленно прекратил загрузку и показал код 413 на вкладке Проверка сети.
Ответ №2:
Аналогичный вопрос также был опубликован здесь. Как указано в принятом ответе:
Проблема в том, что большинство HTTP-клиентов не читают ответ, пока не отправят все тело запроса. Если вы имеете дело с веб-браузерами, вам, вероятно, здесь не повезло.
Недавно я попробовал использовать последнюю версию Safari (версии 15.6 — 17613.3.9.1.5), и она обрабатывает ошибку, как я и ожидал. Он прерывает загрузку файла сразу после получения кода 413 с сервера.
В этом случае я согласен с ответом @AppHandwerker о том, что мы должны проверить размер файла на стороне клиента перед началом загрузки.