Ajax request 303 response CORS issue

I'm trying to imitate a form request with jquery. The form logs in to a server which returns a 303 response and redirects the user to the main page.

This works fine when using the form. However, when trying to do it with an ajax call I get the following error:

XMLHttpRequest cannot load [redirect url]. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin [origin-url] is therefore not allowed access.

I get that this is a CORS error and could be solved by implementing CORS, but I don't understand why it can't function the same way as the form.

My ajax call:

jQuery.ajax({
            url: "[same url as the form]",
            type: "post",
            data: formData
            });

The googling I've done only returns results trying to prevent 303 redirects, so it seems the normal reaction is following the redirect.

What am I missing? Am I stuck having to implement CORS?

Solution

I get that this is a CORS error and could be solved by implementing CORS, but I don't understand why it can't function the same way as the form.

Using a regular form does not give the resulting data to JavaScript running on another website.

The Same Origin Policy protects the data (which might be private between the user and the other website).

CORS allows the other website to state that the data does not need the default level of protection and allow other sites to access it.

Am I stuck having to implement CORS?

CORS is the standard approach to the problem.

JSONP is a hack that does the same job.

A proxy is a possible work around.

If you don't want to read the response into your JS, then just use a form. You can submit it to a hidden iframe if you don't want the results to be visible to the end user.