将大于 1MB 的文件上传到 s3，出现 cors 错误。请求的资源上不存在“Access-Control-Allow-Origin”标头

Posted 2023-03-04

【中文标题】将大于 1MB 的文件上传到 s3，出现 cors 错误。请求的资源上不存在“Access-Control-Allow-Origin”标头

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

【发布时间】：2021-03-24 13:04:16

【问题描述】：

我正在尝试使用 express 和 multer 将图像上传到 s3。 我的前端通过 AWS Amplify 部署，后端通过 Elastic Beanstalk 部署。

问题是当我尝试上传小于 1MB 的图像时，它可以正常工作。但如果文件大于 1MB，则会出现以下错误。

从 “我的前端路由” 访问 “我的后端路由” 处的 XMLHttpRequest 已被 CORS 策略阻止：没有“访问控制允许来源”请求的资源上存在标头。

我以为问题出在 nginx 有限的正文文件大小，所以我更改了它，但事实并非如此。 4mb image file upload gives HTTP 413 error when uploading to production server

这是我的 multer 配置。

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);

这是我的错误请求标头

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

有人可以帮忙吗？

【参考方案1】：

这是因为 Nginx 主体大小限制。

我参考了这篇文章并解决了这个问题。

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

【参考方案2】：

从标题开始，设置如下：

  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 是解决问题的方法。我还建议您在 S3 设置中检查您的 CORS。应该是这样的：

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