How to make JQuery AJAX not follow the redirect after the successful form submission?

Question

Failed to load http://example.com/signup.ashx: Redirect from 'http://example.com/signup.ashx' to 'http://0.0.0.0:8000/?result=success' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://0.0.0.0:8000' is therefore not allowed access.

How to make jquery ajax not follow the redirect after the successful form submission?

Basically my ajax call is a success, but because of the CORS error ajax.fail() is called instead of the ajax.done().

It seems that ajax follow redirects transparently and that there were some considerations to add the methods allowing to override this behavior...

My code is really straightforward:

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
    });
});

It is a trivial task if one has access to both - the backend as well as the frontend, but it's quite a challenge if one has to deal with the remote API.

I do wonder, why on the 2nd decade of the 21th century (the time, when those other servers are just as important as our own) JQuery still has this problem?

cors is a middleware, so it will fail before getting to the success. What is happening — Victor Oliveira, Apr 24 '18 at 21:11
If you do not have cross-origin-access, on your headers, the post method from server will not be called. It will get there and return failing. You need to fix cors — Victor Oliveira, Apr 24 '18 at 21:15
@VictorOliveira This is what I state in the question - CORS Error. I have no control of the third party server, hence I cannot control CORS. — NarūnasK, Apr 24 '18 at 21:17
If they have cross-origin-access, you just need to set it in your headers from request. If they do not accept cross-origin-access, then you can not do much about it. — Victor Oliveira, Apr 24 '18 at 21:19
try adding `crossDomain: true,` to your request, together with url and type. and see if changes something. Also, I need to know more about your problem to help with. I do not know what is happening with your cors. — Victor Oliveira, Apr 24 '18 at 21:29
@VictorOliveira what other information do you need, apart from what I already posted? — NarūnasK, Apr 24 '18 at 21:33
This is the domain you are requesting to? If you can check if the domain has cors enabled or not would be very useful. I am not sure if you can do something if cors is not enabled — Victor Oliveira, Apr 24 '18 at 21:37
@VictorOliveira Popular web-servers like apache/nginx does not add http header like `Access-Control-Allow-Origin "*"` by default. The domain I'm trying to access doesn't have this problem either. Hence CORS Error. — NarūnasK, Apr 24 '18 at 22:10

NVRM · Answer 1 · 2018-04-24T17:19:27.050

-1

You can stop javascript propagation, if you don't have any other tasks running. It will start again at any user action.

The old and robust way:

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

Using a try..catch would be better.

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

Or we can also throw a (new) error, this will exit your task with a warning. It can be useful in some cases for simplication.

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

For your exact query, the fetch api has a Disallowing redirects capability:

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;
});

How to make JQuery AJAX not follow the redirect after the successful form submission?

1 Answers1