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.

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

Answer 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

Answer 3

This solution is for ANDROID 

In my case @Headers("Content-Type: application/json") is used extra which is not needed.

@Multipart

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

I have removed header @Headers("Content-Type: application/json") As multipart I am using so not to use above header.

After removal of that Header code executed successfully.

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