Question

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

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

无法加载提取（节点应用网址）。 No＆＃39; Access-Control-Allow-Origin＆＃39;标头出现在请求的资源上。因此，不允许访问Origin（基本Web应用程序URL）。响应的HTTP状态代码为503.如果不透明的响应符合您的需求，请将请求的模式设置为“no-cors＆＃39;在禁用CORS的情况下获取资源。

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

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

快速节点应用代码

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

Answer 1

HTTP 503表示服务器端出现故障，对吗？或者甚至可以指示服务器根本就没有响应 - 例如，一个案例可能是，您的后端尝试将请求代理到另一个端口上的服务器，但服务器甚至没有启动并侦听预期的端口

那么你是否尝试使用不同的客户端（curl，Postman或其他任何东西）发出相同的POST请求，你是否曾获得过POST而不是503的2xx成功响应？

无论如何，如果您在客户端看到503，那么应该在服务器端记录一些错误以指示失败的原因和原因。因此，要解决您的问题，您可能需要先查看服务器日志以查找503的原因。

就CORS错误消息而言，这是预期的，因为在许多或大多数情况下，如果发生5xx错误，服务器不会在响应中发送Access-Control-Allow-Origin响应头 - 而是服务器可能只会发送2xx＆amp;的标头3xx（重定向）响应。

因此，如果您解决了503问题，以便获得成功响应，您可能会发现您的CORS配置已按预期工作，您无需修改任何内容。

Answer 2

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

获取API - No＆＃39; Access-Control-Allow-Origin＆＃39;标头出现在请求的资源上

2 个答案: