ReactJs - NextJs 错误 - （请求的资源上不存在“Access-Control-Allow-Origin”标头。）

Posted 2023-03-04

【中文标题】ReactJs - NextJs 错误 - （请求的资源上不存在“Access-Control-Allow-Origin”标头。）

【英文标题】：ReactJs - NextJs Error - (No 'Access-Control-Allow-Origin' header is present on the requested resource.)

【发布时间】：2020-09-07 18:53:52

【问题描述】：

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

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

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

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

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

下面我正在使用此功能上传图片，效果很好。

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 将 ip 地址（12.123.1234:4002）映射到子域

【参考方案1】：

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

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

【讨论】：

我不认为是这种情况，我已经在 s3 上正确设置了 cors，它在 localhost 上工作正常，只有当我部署它时才会抛出该错误

从源“dashboard.test.com”访问“api.test.com/courses/upload/test.mov”处的 XMLHttpRequest 已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。

你是否在 api.test.com 上设置了 CORS 允许 dashboard.test.com？

是的，我已经这样做了，我已将 dashboard.test.com 列入白名单

这是服务器端的问题。您可以从您的代码或 Web 服务器（nginx、apache、httpd、..）配置 CORS。可能是您的配置 CORS 错误。