Error 413 payload too large when upload image

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:

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.

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'

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

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

Advertisement

Answer