Error 413 payload too large when upload image

Question

I'm trying to upload an image from local by using base64 to do image detection.
And everything works fine in localhost and postman.
But after deploying, I got CROS error.

I've already got cors middleware in server.js

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 }));

The cors middleware works fine when fetching image with url,
But when I tried to upload image from local by using base64, the console shows:

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

Here's the solution I've tried:

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'
        })

It then shows 413 payload too large.

Since there's no error when testing in localhost and postman, I found out some articles said it might still be the cors error.

2. CORS preflight

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));

It shows error:

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. After I remove credentials: 'include', it shows 413 payload too large again.

I'm so confused... Does anyone know how to fix it? Thank you.

Solution 1

Finally fix the error by placing express.json() AFTER bodyParser.

like this:

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

If runing express.json() first, express would set the global limit to 1mb.

For the next person that needs more detail: Error: request entity too large
And for the person who needs to set Nginx config file: Increasing client_max_body_size in Nginx conf on AWS Elastic Beanstalk

Solution 2

In express use

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

But then in Nginx you also have to edit /etc/nginx/nginx.conf and add the following line inside http block:

client_max_body_size 50M;

Then restart Nginx with sudo service nginx restart

Comments

[sideshowbarker]

The 413 error is the actual problem. That’s what’s causing the browser to log the CORS message — not the other way around. You don’t have a CORS problem. You have 413 problem. If you fix the cause of the 413 problem, you’re likely gonna find that your existing CORS configuration is already working as expected.

[Gerard]

First, you need to identify who is answering the 413 error. It could be your express server, or it could be something else. For example a nginx proxy that redirects requests to your express server. If this were the case, you should check if these have any setting like buffer sizes and such

[InfinitePrime]

Im sure my error is coming from here and I am on ELB too. My server throws a CORS error when my post request body content length is over 1 MB! Still cant fix it.

[Sanjayrajsinh]

From where we can find that file on ElasticBeanstalk /etc/nginx/nginx.conf

[João Pimentel Ferreira]

I have no idea what ElasticBeanstalk means, but to search words inside files in Unix use grep: grep ElasticBeanstalk /etc/nginx/nginx.conf

[Friis1978]

this was the answer for me, changing the limit in nginx did the trick, struggling with this for hours