How to redirect with Flask and jQuery

Question

I'm using Flask as my backend and jQuery for a personal project I'm working on.

To login I want to do this:

$.ajax({ 
    type: "POST",
    data: JSON.stringify(body), //username and password
    contentType: 'application/json; charset=utf-8',
    url: "/login",
    success: successFunction,
    error: errorFunction,
    complete: completeFunction
});

In the errorFuction I would tell the user that their username or password is incorrect etc.

On the backend my /login route looks like this

@app.route("/login", methods=['GET', 'POST'])
def login():
    if(request.method == "POST"):
        #retrieve the username and password sent
        data = request.json

        if(data is None or not 'username' in data or not 'password' in data):
            abort(400)
        else:
            count = User.query.filter(User.username == data['username']).count()
            if(count == 0):
                abort(404) #that user doesnt exist
            else:
                passIsCorrect = User.query.filter(User.username == data['username'],
                                                  User.password == data['password']).count()
                if(passIsCorrect):
                    session['user'] = data['username']
                    return redirect(url_for('index'))
                else:
                    abort(401)

    else:
        return render_template('login.html')

However on the client side, the browser doesn't redirect and if I look in the response object in the complete function I see what would normally be return from my '/' route: 200 OK and the index.html template.

My question is:

Is there some way I can intercept make the client redirect?

I assume the issue is because jquery is initiating the request and not the browser.

My first attempt at solving this problem was to construct the response myself using make_response and set the Location header but this resulted in the same behaviour. My current solution is to return 200 and then the client does window.location = "/", but this seems hacky

Solution 1

Redirects on ajax calls don't work, browsers do not honor them. Most people implement their own custom redirect solution, by returning code 200 and a URL to redirect to in the JSON response. See this question for some good examples.

As a side note, POSTing the login form via ajax does not really give you much of an advantage, I would let the browser POST the form normally and then your Flask view function redirects to a new page on success or redirects back to the login page on failure, possibly with a flash message to inform the user of the error.

Solution 2

No reason use redirect with ajax because it will return redirected content (in your case just content with index endpoint). So you can return link to redirect if all ok (status 200) instead real redirect:

return url_for('index')

and process it with your js:

var successFunction = function (data) {
    // do something
    window.location = data;
};