5xx 或 4xx 错误，“不存在 'Access-Control-Allow-Origin' 标头”

Posted 2023-03-04

【中文标题】5xx 或 4xx 错误，“不存在 \'Access-Control-Allow-Origin\' 标头”

【英文标题】：5xx or 4xx error with “No 'Access-Control-Allow-Origin' header is present”5xx 或 4xx 错误，“不存在 'Access-Control-Allow-Origin' 标头”

【发布时间】：2020-05-08 23:56:41

【问题描述】：

我的浏览器正在 devtools 控制台中记录以下消息：

请求的资源上不存在“Access-Control-Allow-Origin”标头。...响应的 HTTP 状态代码为 503。

背景：我有两个应用程序。一个是连接到 Mongo 数据库的 Express Node 应用程序。另一个是基本的 Web 应用程序，它通过 Fetch API 向 Node 应用程序发出 POST 请求，以从 Mongo 获取数据。

问题：虽然我在本地计算机上没有收到 CORS 错误，但在将基本 Web 应用程序部署到生产环境后，我会立即收到以下错误。 Web 应用程序向 Node 应用程序发出 POST 请求并给我这个：

POST 请求似乎确实有效，并且数据已保存到 Mongo 中，但此错误在 Heroku 中被标记为“严重错误”，非常烦人。

我意识到我可以在 Fetch 中设置 no-cors 选项，但我认为这是必需的，因为我正在向与来源不同的 url 发出请求。对吧？

Express 节点应用代码

在我的app.js 文件中，我设置了正确的标头，以确保其他应用程序可以发出来自不同来源的请求

app.js

// Add headers so we can make API requests
app.use(function (req, res, next) 
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
    res.setHeader('Access-Control-Allow-Credentials', true);
    next();
);

routes/api/api.js

router.post('/users/:url/upload-csv/:csv_name', (req, res) => 
  let csv_name = req.params.csv_name;
  let csv_string = csv_name+req.body.csv_string;

  User.findOne(url: req.params.url)
    .then((user) => 
      if (user.csv_files.length === 0) 
        user.csv_files.push(csv_string);
       else 
        let foundExistingCSV = false;
        for (var i = 0; i < user.csv_files.length; i++) 
          if (user.csv_files[i].includes(csv_name)) 
            foundExistingCSV  = true;
            user.csv_files[i] = csv_string;
            break;
          
        
        if (!foundExistingCSV) user.csv_files.push(csv_string);
      
      user.markModified('csv_files');
      user.save();

      res.status(204);
    )
    .catch((err) => 
      console.log(err);
      res.status(400);
    );
);

基本网络应用代码

POST 我提出的请求

utils.js

utils.exportToMongo = functions(table, name) 
  var exportPlugin = table.getPlugin('exportFile');
  var csv_string   = exportPlugin.exportAsString('csv');

  // Upload the CSV string and its name to Users DB
  fetch(`$utils.fetchUserURL()/upload-csv/$name`, 
    method: 'POST',
    body: JSON.stringify(csv_string: csv_string),
    headers: new Headers(
      'Content-Type': 'application/json',
      Accept: 'application/json',
    )
  ).then((res) => 
    return ;
  ).catch((error) => 
    console.log(error);
    return ;
  );

如何消除503 错误？任何见解将不胜感激！

【问题讨论】：

尝试更改您的 CORS 设置以匹配此设置：enable-cors.org/server_expressjs.html

【参考方案1】：

HTTP 5xx 错误表示服务器端出现故障。或者它甚至可以表明服务器根本没有响应 - 例如，您的后端尝试将请求代理到另一个端口上的服务器，但服务器甚至没有启动并正在侦听预期的端口.

同样，4xx 表示请求存在问题，导致服务器无法处理它。

要确认，您可以尝试使用 curl、Postman 或其他工具发出相同的请求，然后查看是否收到了 2xx 对请求的成功响应，而不是 5xx 或 4xx。

无论如何，如果您在客户端看到 5xx 或 4xx 错误，则应该在服务器端记录一些消息以指示失败的原因和原因。因此，要确定是什么触发了5xx/4xx 错误，请检查服务器日志以查找服务器在发送错误之前记录的消息。

就 CORS 错误消息而言，预计在大多数情况下，对于 5xx 或 4xx 错误，服务器不会将 Access-Control-Allow-Origin 响应标头添加到响应中；相反，服务器很可能只会为2xx 和3xx（重定向）响应发送该标头。

因此，如果您解决了 5xx/4xx 错误的原因，从而获得了成功响应，您可能会发现您的 CORS 配置已经正常工作，并且您无需修复任何东西。

【讨论】：

啊，看来你可能是对的！我浏览了Heroku日志，发现503错误的描述是Request Timeout。关于我应该如何解决这个问题的任何想法还是一个单独的问题？再次感谢！

在没有更多线索的情况下不清楚原因可能是什么，但是是的，这似乎与此处现有问题中描述的问题完全不同，因此值得为它发布一个单独的新问题，以便您可以更具体地关注它并为此提供帮助——例如，在你给它的标签集中包含http-status-code-503和heroku

【参考方案2】：

我有同样的问题，服务器不支持跨源请求。 API 开发人员应将 Access-Control-Allow-Origin 更改为 *（表示来自任何来源）。有时 jsonp 请求会绕过，如果它不起作用，谷歌浏览器会提供插件来更改来源 plugin