Javascript 带有“的5xx或4xx错误;否';访问控制允许原点';标题存在”;
我的浏览器正在devtools控制台中记录以下消息: 请求的资源上不存在“Access Control Allow Origin”标头…响应的HTTP状态代码为503 背景:我有两个应用程序。连接到Mongo数据库的Express Node应用程序。另一个是基本的web应用程序,它通过fetchapi向节点应用程序发出Javascript 带有“的5xx或4xx错误;否';访问控制允许原点';标题存在”;,javascript,node.js,cors,fetch-api,Javascript,Node.js,Cors,Fetch Api,我的浏览器正在devtools控制台中记录以下消息: 请求的资源上不存在“Access Control Allow Origin”标头…响应的HTTP状态代码为503 背景:我有两个应用程序。连接到Mongo数据库的Express Node应用程序。另一个是基本的web应用程序,它通过fetchapi向节点应用程序发出POST请求,以从Mongo获取数据 问题:虽然我在本地机器上没有收到任何CORS错误,但在我将基本web应用程序部署到生产环境时,我会收到以下错误。向节点应用程序发出POST请求
POST
请求,以从Mongo获取数据
问题:虽然我在本地机器上没有收到任何CORS
错误,但在我将基本web应用程序部署到生产环境时,我会收到以下错误。向节点应用程序发出POST
请求并提供以下信息的web应用程序:
POST
请求似乎确实起作用,数据被保存到Mongo中,但这个错误在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();
});
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);
});
});
如何删除
503
错误?如有任何见解,将不胜感激 HTTP5xx
错误表示服务器端出现故障。或者它甚至可以表示服务器根本没有响应—例如,在某种情况下,您的后端尝试将请求代理到另一个端口上的服务器,但服务器甚至没有启动并侦听预期端口
类似地,一个4xx
表示请求中的某些问题阻止了服务器处理它
要确认,您可以尝试使用不同的客户端(curl、Postman或其他任何客户端)发出相同的请求,并查看您是否得到请求的2xx
成功响应,而不是5xx
或4xx
不管怎样,如果在客户端看到5xx
或4xx
错误,服务器端应记录一些消息,以指示失败的原因和原因。因此,要确定是什么触发了5xx
/4xx
错误,首先查看服务器日志,查找服务器在发送错误之前记录的消息
就CORS错误消息而言,预计在大多数情况下,当出现5xx
或4xx
错误时,服务器不会将访问控制允许来源
响应头添加到响应中;相反,服务器很可能只为2xx
和3xx
(重定向)响应发送该头
因此,如果您解决了
5xx
/4xx
错误的原因,以便获得成功的响应,您可能会发现您的CORS配置已按预期工作,并且没有任何问题需要修复。我也遇到了同样的问题,服务器不支持跨源请求。API开发人员应该将访问控制允许源代码更改为*(表示来自任何源代码)。有时候jsonp请求会绕过,如果它不起作用,google chrome会提供插件来更改源代码
尝试更改您的CORS设置以匹配此设置:啊,看来您可能是对的!我查看了Heroku日志,发现
503
错误的描述是Request Timeout
。关于我应该如何解决这个问题,或者这是一个单独的问题,有什么想法吗?再次感谢!不清楚原因可能是什么,没有进一步的线索,但是的,这似乎是一个与现有问题中描述的问题完全不同的问题,它值得为它发布一个单独的新问题,这样你可以得到更具体的关注和帮助,例如,通过将http-status-code-503
和heroku
包含在您给它的标记集中
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 {};
});
}