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

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

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

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

Issue: 虽然我没有收到CORS在我的本地计算机上出现错误，当我将基本 Web 应用程序部署到生产环境时，我就会收到以下错误。该 Web 应用程序制作了POST向 Node 应用程序发出请求并给我这个：

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

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

Express节点应用程序代码

In my 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();
});

路线/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错误？任何见解将不胜感激！

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

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

为了确认，你可以尝试使用curl、Postman或其他东西发出相同的请求，看看是否得到2xx请求的成功响应，而不是5xx or 4xx.

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

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

因此，如果您找到原因5xx/4xx错误已解决，以便您可以获得成功响应，您可能会发现您的 CORS 配置已经工作正常，并且您没有什么需要修复的。