ajax - 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

Answer 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.