javascript – 5xx或4xx错误,“No’Access-Control-Allow-Origin’标题存在”

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

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获取数据.

问题：虽然我的本地计算机上没有收到任何CORS错误,但只要我将基本Web应用程序部署到生产环境,就会出现以下错误.向Node应用程序发出POST请求的Web应用程序并给出了以下信息：

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

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

Express Node应用程序代码

在我的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);
    });
});

基本Web应用程序代码

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

解决方法:

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

类似地,4xx表示请求阻止服务器处理它的一些问题.

要确认,您可以尝试使用不同的客户端(curl,Postman或其他)发出相同的请求,并查看您是否获得了请求的2xx成功响应,而不是5xx或4xx.

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

到目前为止CORS错误消息已经发生,预计在许多或大多数情况下,当发生5xx或4xx错误时,服务器不会将Access-Control-Allow-Origin响应头添加到响应中 – 而是服务器很可能只会发送2xx和3xx(重定向)响应的标头.

因此,如果您找到解决5xx / 4xx错误的原因以便获得成功响应,您可能会发现您的CORS配置已按预期工作,您无需解决任何问题.

标签：fetch-api,javascript,node-js,cors
来源： https://codeday.me/bug/20190917/1808835.html