5xx 或 4xx 错误，“不存在 'Access-Control-Allow-Origin' 标头" [英] 5xx or 4xx error with “No 'Access-Control-Allow-Origin' header is present”
问题描述
我的浏览器正在 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 成功响应，而不是 5xx 或 4xx.
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.
无论如何，如果您在客户端看到 5xx 或 4xx 错误，则应该在服务器端记录一些消息以指示失败的原因和原因.因此，要确定是什么触发了 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 错误消息而言，预计在大多数情况下，对于 5xx 或 4xx 错误，服务器不会添加 Access-Control-Allow-Origin 响应头响应；相反，服务器很可能只会发送 2xx 和 3xx(重定向)响应的标头.
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.
这篇关于5xx 或 4xx 错误，“不存在 'Access-Control-Allow-Origin' 标头"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
