Как заставить JQuery AJAX не выполнять перенаправление после успешной отправки формы?

Question

Не удалось загрузить http://example.com/signup.ashx: Перенаправление с 'http://example.com/signup.ashx' на' http://0.0.0.0:8000/?result=success' заблокировано политикой CORS: заголовок «Access-Control-Allow-Origin» отсутствует запрашиваемый ресурс. Источник 'http://0.0.0.0:8000' поэтому не имеет доступа.

Как заставить jquery ajax не выполнять перенаправление после успешной отправки формы?

В основном мой ajax вызов успешен, но из-за ошибки CORS ajax.fail() вызывается вместо ajax.done().

Кажется, что ajax следует за перенаправлениями прозрачно и что были некоторые соображения по добавлению методов, позволяющих переопределить это поведение ...

Мой код очень прост:

form.on("submit", function(e) {
    e.preventDefault();
    $.ajax({
        type: "POST",
        url: url,
        data: data
    }).done(function(data) {
        // do something on success
    }).fail(function(data) {
        // do something on failure
    });
});

Это тривиальная задача, если у вас есть доступ к обоим - backend, а также frontend, но это довольно сложно, если приходится иметь дело с удаленным API.

Интересно, почему в 2-е десятилетие 21-го века (время, когда эти другие серверы столь же важны, как и наши) JQuery все еще имеет это проблема?

Answer 1

Вы можете остановить распространение JavaScript, если у вас нет других запущенных задач. Он начнется снова при любом действии пользователя.

Старый и надежный способ:

window.stop() // Stop all js in the window context

Было бы лучше использовать try..catch.

try{
     // ajax stuff here
}
catch(nope){ console.log(nope) } // No errors

Или мы также можем выдать (новую) ошибку, это завершит вашу задачу с предупреждением. В некоторых случаях это может быть полезно для упрощения.

throw "Error!"; // ⚠ Error! (Task stopped when thrown)

Для вашего точного запроса fetch api имеет возможность Disallowing redirects:

fetch("awesome-picture.jpg", { redirect: "error" }).then(function(response) {
  return response.blob();
}).then(function(imageBlob) {
  let imgObjectURL = URL.createObjectURL(imageBlob);
  document.getElementById("img-element-id").src = imgObjectURL;
});

См. Также fetch ()