javascript - 尝试将 jQuery ajax 转换为 ES6 提取

Question

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

这给了我以下错误:

Failed to load https://stubidp.sustainsys.com/xxx?SAMLRequest=xxx: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:58659' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

这导致我添加以下属性:

mode: 'no-cors'

这给了我以下警告(并且没有进入我支持的方法)

Current.js:78 Cross-Origin Read Blocking (CORB) blocked cross-origin response https://stubidp.sustainsys.com/xxx?SAMLRequest=xxx&RelayState=q-9E0I4hwfJLlInurXY-Yu4g with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.

这导致我添加以下内容:

'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 错误。

Answer 1

我要说感谢@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'
});

一个小背景故事，以防万一:问题中的所有内容都是基于尝试 POST 到 ASP.Net Core RazorPage 事件。在我们开始这个新项目和将响应转换为实际实体所必须经历的额外痛苦(不是上面的代码)之间的一些认识之后，我们改为使用 WebAPI。此答案中的代码将转到 WebAPI Controller ，不再是 RazorPage 方法。

希望对大家有帮助。