Error 413 payload too large when upload image

Question

have a nice day.

I'm trying to upload 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.

Answer 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