ReactJs - NextJs 错误 - （请求的资源上不存在“访问控制允许来源”header。）

Question

大家好，我正在创建一个 MERN 堆栈应用程序。 当我尝试通过从前端到 s3 的路由上传视频时。 我收到此错误：

No 'Access-Control-Allow-Origin' header is present on the requested resource.

在nodejs中，我已经正确设置了 cors 。

在前端（nextjs）我使用这个 function 上传视频：

const appendVideo = (values) => {
  const message = 'Wait until the page is refreshed ! Video will be listed down below';
  dispatch(showNotification('info', message));
  const formData = new FormData();
  formData.append('file', videofile);
  const url = `${apiUrl}/courses/upload/${videofile.name}`;
  axios.post(url, formData).then((res) => {
    onSubmit(values, res);
  });
};

下面我使用这个 function 上传图像，它工作正常。

const submitImage = () => {
  const message = 'Wait until the the image is uploaded';
  dispatch(showNotification('info', message));
  const formData = new FormData();
  formData.append('file', imageFile);
  const url = `${apiUrl}/courses/upload/${imageFile.name}`;
  axios.post(url, formData).then(() => {
    setImageText(imageFile);
  });
};

我正在使用 DigitalOcean，我有 2 个子域（api.test.com 和 dashboard.test.com）。 该请求来自dashboard.test.com。

我正在使用 Nginx 到 map ip 地址（12.123.1234:4002）到子域

Answer 1

您必须在 AWS 上配置 S3 的 cors 允许 dashboard.test.com 域。 请参阅此处的AWS 文档 AWS 文档。 下面的代码是示例：

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>http://dashboard.test.com</AllowedOrigin>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>