尝试将jQuery ajax转换为ES6提取

时间:2018-06-25 13:11:54

标签: javascript jquery cors fetch-api cross-origin-read-blocking

为了不使用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);
  }
});

我使用fetch在标准javascript中重写了它,如下所示:

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)阻止了MIME类型为text / html的跨域响应https://stubidp.sustainsys.com/xxx?SAMLRequest=xxx&RelayState=q-9E0I4hwfJLlInurXY-Yu4g。有关更多详细信息,请参见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错误。

1 个答案:

答案 0 :(得分:3)

我要说的是,感谢@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方法。

希望它可以帮助某人。