上传图片时出现 Error 413 payload too large。

Question

我正在尝试使用 base64 从本地上传图像进行图像检测。
在本地和Postman中一切都正常。
但是在部署后，我遇到了CROS错误。

我已经在 server.js 中添加了cors中间件。

const express = require("express");    
const cors = require("cors");
const bodyParser = require("body-parser");

const app = express();

app.use(cors());

app.use(bodyParser.json({ limit: "10000kb", extended: true }));
app.use(bodyParser.urlencoded({ limit: "10000kb", extended: true }));

当使用URL获取图像时， cors 中间件正常工作。但是，当我试图通过使用base64从本地上传图像时，控制台显示：

No 'Access-Control-Allow-Origin' header is present on the requested resource.

以下是我尝试的解决方案：

1. cors-anywhere

App.js

    const proxyUrl = 'https://cors-anywhere.herokuapp.com/';
    
    fetch(proxyUrl + API_CALL.IMAGE_URL, {
          method: 'post',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify({
            inputLink: inputLink,
            inputMethod: inputMethod
          }),
          credentials: 'include'
        })

接下来会显示 413 payload too large 错误。

由于在本地测试和使用 Postman 时没有出现错误，我发现一些文章称这可能仍然是 CORS 错误。

2. CORS 预检请求

server.js

    const corsOptions = {
        origin: 'https://front-end-url/',
        methods: 'GET, POST, PUT',
        credentials: true,
        allowedHeaders: 'Content-Type,Authorization',
        exposedHeaders: 'Content-Range,X-Content- Range'
    };
    app.options('/imageUrl', cors(corsOptions));

显示错误：

CORS policy: Response to preflight request doesn't pass access control check: 
The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' 
when the request's credentials mode is 'include'

3. 我移除了credentials: 'include'后，又出现了413 payload too large。

我很困惑... 有人知道怎么解决吗？谢谢。

- user13145792

---

这在本地主机上根本不会发生？ - PayamB.

413错误是实际问题。这就是导致浏览器记录CORS消息的原因 - 而不是相反。您没有CORS问题，而是413问题。如果您解决了413问题的原因，您很可能会发现您现有的CORS配置已经按预期工作。 - sideshowbarker

首先，您需要确定是谁在响应413错误。它可能是您的Express服务器，也可能是其他东西。例如，一个将请求重定向到您的Express服务器的Nginx代理。如果是这种情况，您应该检查这些设置是否有缓冲区大小等设置。 - Gerard

你好 @Gerard，我将 bodyParser 的限制改为了 100000000kb，并且在 node_modules > body-parser > lib 文件夹中的 json.js 和 text.js 中也进行了更改，但仍然显示 413 错误。我正在 Heroku 上部署。这个错误不是关于 bodyParser，而是关于 Heroku 吗？ - user13145792

关于上传大小，我不知道Heroku是否有任何限制。 - sideshowbarker

Answer 1

把 express.json() 放在 bodyParser 后面，最终解决错误。

像这样:

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

如果先运行express.json()，那么Express将把全局限制设置为1mb。

对于需要更多细节的人： 错误：请求实体过大
对于需要设置Nginx配置文件的人： 在AWS Elastic Beanstalk上增加Nginx conf中的client_max_body_size

- user13145792

---

我确定我的错误来自这里，而且我也在ELB上。当我的POST请求正文内容长度超过1 MB时，我的服务器会抛出CORS错误！仍然无法解决它。 - InfinitePrime

Answer 2

在 Express 中的使用

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

但是在 Nginx 中，您还需要编辑 /etc/nginx/nginx.conf 文件，并在 http 区块中添加以下行：

client_max_body_size 50M;

然后使用 sudo service nginx restart 命令重启 Nginx。

- João Pimentel Ferreira

---

我们从哪里可以在ElasticBeanstalk上找到该文件 /etc/nginx/nginx.conf？ - Sanjayrajsinh

我不知道ElasticBeanstalk是什么意思，但在Unix中搜索文件中的单词，请使用grep：grep ElasticBeanstalk /etc/nginx/nginx.conf。 - João Pimentel Ferreira

这对我来说是答案，更改nginx中的限制就解决了问题，我为此苦苦挣扎了数小时。 - Friis1978

Answer 3

This solution is for ANDROID 

在我的情况下，不需要使用额外的@Headers("Content-Type: application/json")。

@Multipart

@POST("user-management/user/profile")
@Headers("Content-Type: application/json")
fun updateProfileImage( @Part file: MultipartBody.Part,@Header("Authorization") authKey: String): Call<ProfileImageResponse>

我已经移除了头部 @Headers("Content-Type: application/json")，因为我正在使用multipart，所以不需要使用上述头部。

移除该头部后，代码成功执行。

@Multipart
@POST("user-management/user/profile")
fun updateProfileImage( @Part file: MultipartBody.Part,@Header("Authorization") authKey: String):Call<ProfileImageResponse>

- Bhavesh Chand