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>