uploading file which is larger than 1MB to s3, getting cors error. No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

I am trying to upload an image to s3 with express and multer. My frontend was deployed through AWS Amplify and the backend through Elastic Beanstalk.

The thing is when I tried to upload an image of less than 1MB, it works fine. But if the file is larger than 1MB I got the error below.

Access to XMLHttpRequest at 'my backend route' from origin 'my frontend route' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I thought the problem was about the Nginx limited body file size, so I changed it, but it was not. 4mb image file upload gives HTTP 413 error when uploading to production server

Here is my multer config.

import aws from "aws-sdk";
import multer from "multer";
import multers3 from "multer-s3";

const s3 = new aws.S3({
  accessKeyId: process.env.AMAZON_S3_ACCESS_KEY_ID,
  secretAccessKey: process.env.AMAZON_S3_SECRET_ACCESS_KEY,
  region: "ap-southeast-2",
});

const postUpload = multer({
  storage: multers3({
    s3,
    bucket: 'bucket name'///,
    acl: "public-read",
    metadata: (req, file, cb) => {
      cb(null, { fileName: file.fieldname });
    },
    key: (req, file, cb) => {
      cb(null, Date.now().toString());
    },
  }),
  limits: { fileSize: 5242880 },
});

export const postUploadMiddleware = postUpload.array("files", 6);

export const uploadController = (req, res) => {
  console.log(req.files);
  const { files } = req;
  res.json(files);
};

///////
app.post("/api/post/upload", postUploadMiddleware, uploadController);

And this is my request header with the error

POST /api/post/upload HTTP/1.1
Host: 'host name'///
Connection: keep-alive
Content-Length: 1195613
Accept: application/json, text/plain, */*
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 11_0_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryLrPlKnjaQZwy7M1Z
Origin: 'frontend url'///
Sec-Fetch-Site: same-site
Sec-Fetch-Mode: cors
Sec-Fetch-Dest: empty
Referer: 'frontend url'///
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9,ko-KR;q=0.8,ko;q=0.7

Is there anyone who can help?

score 4 · Answer 1 · answered Dec 15 '20 at 13:36

4

This was because of the Nginx body size limit.

I referred to this post and settled the issue.

4mb image file upload gives HTTP 413 error when uploading to production server

answered Dec 15 '20 at 13:36

Jeahoon Jung

99
1
5

Works, thanks. I wonder why the CORS error is thrown for a size limit, could you care to explain? – Prajwal Kulkarni Mar 21 '22 at 16:27

score 0 · Answer 2 · answered Dec 13 '20 at 19:55

Start with the headers, set them up as follows:

  res.setHeader('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET,HEAD,OPTIONS,POST,PUT');
  res.setHeader('Access-Control-Allow-Headers', 'origin, content-type, accept, Authorization');

Here is a solution to the problem. I also suggest you check your CORS in the S3 settings. It should be something like this:

[
    {
        "AllowedHeaders": [],
        "AllowedMethods": [
            "GET",
            "POST",
            "PUT",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]

score 0 · Answer 3 · edited Aug 13 '23 at 09:27

For the multi-part upload to complete the S3 bucket needs to return an "ETag" header to the client up reception of the last chunk. You will need to add "ExposeHeaders": ["ETag"] in the CORS configuration of your target S3 bucket Below is an example of CORS configuration:

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD",
            "POST",
            "PUT"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "ETag",
            "x-amz-meta-custom-header"
        ],
        "MaxAgeSeconds": 3000
    }
]

Hope this helps.

uploading file which is larger than 1MB to s3, getting cors error. No 'Access-Control-Allow-Origin' header is present on the requested resource

3 Answers3