表单提交成功后如何让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”标头。 Origin 'http://0.0.0.0:8000' 因此不允许访问。

如何让jqueryajax在表单提交成功后不跟随重定向？

基本上我的ajax 调用是成功的，但是由于CORS 错误ajax.fail() 被调用而不是ajax.done()。

似乎ajax 遵循重定向transparently 并且有一些考虑添加允许覆盖此行为的方法...

我的代码真的很简单：

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，这将是一项相当大的挑战。

我确实想知道，为什么在 21 世纪 的 2nd 十年（那个时候，其他服务器和我们自己的服务器一样重要）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()