javascript - 尝试将 jQuery ajax 转换为 ES6 fetch
问题描述
为了不使用 jQuery(如果ajax
我只需要它),我有以下ajax
调用,它就像一个冠军。
$.ajax({
type: "POST",
url: "/Tests/EEG/Portable/Index?handler=Testing",
beforeSend: function (xhr) {
xhr.setRequestHeader("XSRF-TOKEN", $('input:hidden[name="__RequestVerificationToken"]').val());
},
data: JSON.stringify(model),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
alert("Success");
},
failure: function (response) {
alert(response);
}
});
我用标准的javascript重写了它,fetch
如下所示:
fetch("/Tests/EEG/Portable/Index?handler=Testing", {
method: "POST",
headers: {
'XSRF-TOKEN': $('input:hidden[name="__RequestVerificationToken"]').val(),
'content-type': 'application/json; charset=utf-8'
},
body: JSON.stringify(model)
}).then(checkStatus)
.then(function (data) {
alert("second then");
}).catch(function (error) {
console.log(error);
});
这给了我以下错误:
无法加载https://stubidp.sustainsys.com/xxx?SAMLRequest=xxx:对预检请求的响应未通过访问控制检查:请求的资源上不存在“Access-Control-Allow-Origin”标头。因此,不允许访问源“ http://localhost:58659 ”。如果不透明的响应满足您的需求,请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。
这导致我添加以下属性:
mode: 'no-cors'
这给了我以下警告(并且没有得到我支持的方法)
Current.js:78 跨域读取阻止 (CORB) 阻止了跨域响应https://stubidp.sustainsys.com/xxx?SAMLRequest=xxx&RelayState=q-9E0I4hwfJLlInurXY-Yu4g,MIME类型为 text/html。有关详细信息,请参阅https://www.chromestatus.com/feature/5629709824032768 。
这导致我添加以下内容:
'X-Content-Type-Options': 'nosniff'
这给了我同样的警告,但仍然没有到达我的服务器。
关于我仍然缺少什么的任何想法?
更新
在浏览 Chrome 调试器工具上的网络选项卡时,我注意到了该Copy as fetch
选项。我在工作的 jQuery 调用上做了这个,并给了我以下 JavaScript:
fetch("http://localhost:58659/Tests/EEG/Portable/Index?handler=Testing", {
"credentials": "include",
"headers": {},
"referrer": "http://localhost:58659/Tests/EEG/Portable",
"referrerPolicy": "no-referrer-when-downgrade",
"body": JSON.stringify(model),
"method": "POST",
"mode": "cors"
});
当我运行该fetch
方法时,我得到一个400 Bad request
错误。
解决方案
我想说这要感谢@Wesley Coetzee 让球朝着正确的方向发展。对我来说照顾它的是以下代码:
fetch('/api/Tests/Single', {
credentials: 'include',
headers: {
'XSRF-TOKEN': $('input:hidden[name="__RequestVerificationToken"]').val(),
'content-type': 'application/json; charset=utf-8',
'X-Content-Type-Options': 'nosniff'
},
referrer: '/Tests/EEG/Portable',
referrerPolicy: 'no-referrer-when-downgrade',
body: JSON.stringify(model),
method: 'POST',
mode: 'cors'
});
一个小故事以防万一:问题中的所有内容都基于尝试发布到 ASP.Net Core RazorPage 事件。在我们开始的这个新项目和您必须经历的额外痛苦(不是上面的代码)将响应转换为实际实体之间进行了一些认识之后,我们改为使用 WebAPI。此答案中的代码将转到 WebAPI 控制器,而不再是 RazorPage 方法。
希望它可以帮助某人。
推荐阅读
- xml - XSLT - 在与元素相同的级别上显示属性
- php - 添加 sqlite() 后,索引页面立即停止工作
- azure - 使用 Azure 创建 Redis 实例以及 Redis 配置 JSON 文件抛出错误
- r - Change colors of x-axis labels in dotplot from Lattice package R
- email - Error when sending email with Accounts.sendVerificationEmail()
- typescript - i18next 和 i18next-node-fs-backend 显示键而不是字符串
- reactjs - 运行“npm run dev”实现 React 服务器端渲染时出错
- javascript - 如何使用 setState 更改输入值
- angular - Authenticate to Azure AD from Angular 9 Application
- python - Python throws 'certificate verify failed' Error while instantiating client session in OTRS