获取“被 CORS 策略阻止：请求的资源上不存在 'Access-Control-Allow-Origin' 标头。”使用 Axios 使用 MERN 堆栈

Posted 2023-02-16

【中文标题】获取“被 CORS 策略阻止：请求的资源上不存在 \'Access-Control-Allow-Origin\' 标头。”使用 Axios 使用 MERN 堆栈

【英文标题】：Getting "blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource." with MERN stack using Axios获取“被 CORS 策略阻止：请求的资源上不存在 'Access-Control-Allow-Origin' 标头。”使用 Axios 使用 MERN 堆栈

【发布时间】：2021-02-18 12:20:09

【问题描述】：

我有一个 MERN 堆栈设置，我的 React 前端在一个服务器实例上，我的后端 Node-Express API 在另一个服务器实例上。在开发中我没有问题，但如果我尝试在生产中上传超过 1MB 的文件，我会收到 CORS 错误。如果它低于 1MB，它就可以上传。

Node-Express 中间件：

app.use(function(req, res, next) 
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
  ); // I have tried without this as well.

  app.use(fileUpload(
    createParentPath: true,
    limits:  
      fileSize: 64 * 1024 * 1024 * 1024 // 64MB max file(s) size
    ,
  )) / I have tried without the limits, too.

  app.use(cors()); // I have tried even by including the origin parameter

反应

 axios.post(`$apiEndpoint/upload`, data,  
      headers:  "x-auth-token":token  
    )
      .then((response) => console.log(response.data));

【问题讨论】：

能否包含整个代码？

会有帮助吗？我将 create-react-app 用于开发中的 React 和两个单独的 docker 容器（一个用于 mongodb，一个用于节点 API 实例）。它在开发中运行良好，但在生产中却不行。

根据我的经验，当出现服务器错误时，它的响应与成功时不同，其中包括标头。这就是为什么在客户端您会看到 CORS 错误。我建议检查您的服务器日志并确定当您发送大于 1MB 的文件时会发生什么。

@poeticGeek ????我不知道为什么我不打算这样做。只是一个菜鸟的错误。设置代理时，我假设 nginx 已从其默认设置更改。原来默认的最大文件上传大小已经到位。我提高了它，它就像一个魅力。谢谢！

【参考方案1】：

感谢 cmets 中很棒的人，有人指出我应该检查日志。出于某种原因，就像一个菜鸟一样，我没想过要这样做。一旦我这样做了，我发现 nginx 没有配置为更大的文件上传大小。我将它设置为 100Mb，它就像一个魅力。