尝试将 jQuery ajax 转换为 ES6 fetch答案

【问题标题】：Trying to Convert jQuery ajax to ES6 fetch尝试将 jQuery ajax 转换为 ES6 fetch
【发布时间】：2018-12-04 01:55:32
【问题描述】：

为了不使用 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”标头。因此，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 错误。

【问题讨论】：

检查你的服务器是否响应正确的 CORS
确保您的 API 允许来自源 http://localhost:58659 或来自 * 的仅用于开发。另外，我假设您使用的是完整网址而不是 /Test?
@Justinas 我认为它确实看到 jquery 版本有效。查看 chrome 的网络选项卡，没有任何内容像 CORS 一样跳出来。我确实注意到了一个“复制为提取”选项，并将其添加到我的帖子的更新中。
@WesleyCoetzee 我认为是这样，否则 jquey ajax 调用将不起作用。我没有更改任何代码，不，我没有将完整的网址传递给它。至少在上述更新之前。
您是否添加了标题？

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

【解决方案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'
});

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

希望对某人有所帮助。

【讨论】：