Попытка конвертировать jQuery ajax в ES6 - PullRequest
Новая
       35

Попытка конвертировать jQuery ajax в ES6

0 голосов
/ 25 июня 2018

В попытке не использовать 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.

1 Ответ

0 голосов
/ 26 июня 2018

Я бы сказал, что благодаря @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 и больше не является методом RazorPage.

Надеюсь, он кому-нибудь поможет.

...