标签:fetch-api javascript node-js cors
我的浏览器在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
本站声明:
1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。