我的浏览器在开发工具控制台中记录以下消息:

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 应用程序部署到生产环境时，就会出现以下错误。 Web 应用程序向 Node 应用程序发出 POST 请求并给出以下内容:

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

我意识到我可以在 Fetch 中设置 no-cors 选项，但我相信这是必需的，因为我向与源不同的 URL 发出请求。对吗？

Express Node 应用代码

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

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

请您参考如下方法:

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

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

为了确认这一点，您可以尝试使用curl、Postman 或其他东西发出相同的请求，并查看是否收到该请求的2xx 成功响应，而不是5xx 或4xx。

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

就 CORS 错误消息而言，预计在大多数情况下，对于 5xx 或 4xx 错误，服务器不会将 Access-Control-Allow-Origin 响应 header 添加到响应中；相反，服务器很可能只会发送 2xx 和 3xx(重定向)响应的 header 。

因此，如果您解决了 5xx/4xx 错误的原因并获得成功响应，您可能会发现您的 CORS 配置已经正常工作，并且您无需修复任何内容。