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

IT技术 javascript node.js cors fetch-api
2021-02-09 20:28:07

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

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

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

问题:虽然我CORS在本地机器上没有收到任何错误,但一旦我将基本 Web 应用程序部署到生产环境,我就会收到以下错误消息。POST向 Node 应用程序发出请求并给我以下信息的 Web 应用程序

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

我意识到我可以no-cors在 Fetch 中设置该选项,但我相信它是必需的,因为我正在向与原点不同的 url 发出请求。对?

Express 节点应用程序代码

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

应用程序.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);
    });
});

基本 Web 应用程序代码

POST 我正在提出的要求

实用程序.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错误?任何见解将不胜感激!

2个回答

HTTP5xx错误表示服务器端出现某些故障。或者它甚至可以表明服务器根本没有响应——例如,一种情况可能是,你的后端试图将请求代理到另一个端口上的服务器,但服务器甚至没有启动并监听预期的端口.

类似地,a4xx表示请求的某些问题阻止了服务器处理它。

要确认,您可以尝试使用 curl 或 Postman 或其他方式发出相同的请求,然后查看是否收到2xx请求成功响应,而不是5xx4xx

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

就 CORS 错误消息而言,预计在大多数情况下,对于5xxor4xx错误,服务器不会将Access-Control-Allow-Origin响应标头添加到响应中;相反,服务器很可能只会为2xx3xx(重定向)响应发送该标头

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

在没有进一步线索的情况下不清楚原因可能是什么,但是是的,这似乎与此处现有问题中描述的问题完全不同,值得为它发布一个单独的新问题,以便您可以得到更具体的关注并提供帮助为此——例如,通过在你给它的标签集中包含http-status-code-503heroku
2021-03-13 20:28:07
啊看起来你可能是对的!我浏览了 Heroku 日志,发现503错误的描述Request Timeout. 关于我应该如何解决这个问题的任何想法还是一个单独的问题?再次感谢!
2021-03-27 20:28:07

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