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

2022-01-15 00:00:00 cors node.js javascript fetch-api

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

My browser is logging the following message in the devtools console:

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

No 'Access-Control-Allow-Origin' header is present on the requested resource.… The response had HTTP status code 503.

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

Background: I have two apps. One that is an Express Node application connected to a Mongo database. The other is a basic web application that makes POST requests to the Node application via the Fetch API to get data from Mongo.

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

Issue: Though I receive no CORS errors on my local machine, I am given the error below as soon as I deploy my basic web application to production. The web application that makes a POST request to the Node app and gives me this:

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

The POST request does seem to work and the data is saved into Mongo but this error is being marked as a "Critical Error" in Heroku and is quite annoying.

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

I realize that I could set the no-cors option in Fetch but I believe that it is required since I am making a request to a url that is different than the origin. Right?

Express 节点应用代码

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

In my app.js file I have set the correct headers to ensure that other applications can make requests from different origins

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

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

How can I remove the 503 error? Any insight would be greatly appreciated!

推荐答案

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

An HTTP 5xx error indicates some failure on the server side. Or it can even indicate the server just isn’t responding at all — e.g., a case might be, your backend tries to proxy a request to a server on another port, but the server is not even be up and listening on the expected port.

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

Similarly, a 4xx indicates some problem with the request prevented the server from handling it.

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

To confirm, you can try making the same request using curl, or Postman, or something, and see if you get a 2xx success response for the request, rather than a 5xx or 4xx.

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

Regardless, if you see a 5xx or 4xx error on the client side, some message should get logged on the server side to indicate what failed and why. So to identify what triggered the 5xx/4xx error, check server logs to find messages the server logged before it sent the error.

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

As far as CORS error messages go, it’s expected that in most cases for a 5xx or 4xx error, servers won’t add the Access-Control-Allow-Origin response header to the response; instead the server most likely will only send that header for 2xx and 3xx (redirect) responses.

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

So if you get the cause of an 5xx/4xx error solved such that you can get a success response, you may find your CORS config is already working fine and you’ve got nothing left to fix.

相关文章