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:
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.
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'
credentials: 'include'
, it shows 413 payload too large
again.I'm so confused... Does anyone know how to fix it? Thank you.
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