浏览器未接收/解释来自 Nginx 的 413 响应

Question

我有一个 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，并且 headers 为空对象。

任何帮助将非常感激！

Answer 1

这似乎是一个老问题，但更可悲的是，在 2019 年，Firefox 和 Chrome 仍然无法按照您的预期处理 413。尽管 nginx 发送了 413，但仍继续处理上传。

好的旧 Safari（我不常说的话）似乎是唯一能满足您期望的现代浏览器，如果您发送自定义 413 错误，它会处理它。

关于这个问题，您可以使用 Angular 来获取文件的大小，并使用简单的端点在发送实际文件之前验证文件是否太大。

在 JS 中这样做将是最好的选择。