Question

我正在使用Flask作为我的后端和jQuery用于我正在进行的个人项目。

要登录，我想这样做：

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

在errorFuction中，我会告诉用户他们的用户名或密码不正确等等。

在后端，我的/登录路线看起来像这样

@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')

然而，在客户端，浏览器没有重定向，如果我查看完整功能中的响应对象，我会看到通常会从我的＆＃39; /＆＃39; route：200 OK和index.html模板。

我的问题是：

我是否有某些方法可以拦截客户端重定向？

我认为问题是因为jquery正在启动请求而不是浏览器。

我首次尝试解决此问题的方法是使用make_response自行构建响应并设置Location标头，但这会导致相同的行为。我目前的解决方案是返回200，然后客户端执行window.location = "/"，但这似乎是hacky

Answer 1

ajax调用的重定向不起作用，浏览器不尊重它们。大多数人通过返回代码200和重定向到JSON响应中的URL来实现自己的自定义重定向解决方案。有关一些好的示例，请参阅this question。

作为旁注，通过ajax发布登录表单并没有给你带来太大的好处，我会让浏览器正常POST表单然后你的Flask视图功能在成功时重定向到新页面或重定向回到登录页面失败，可能带有flash消息，通知用户错误。

Answer 2

没有理由使用带有ajax的重定向，因为它会返回重定向的内容（在您的情况下只是内容为index端点）。所以你可以返回重定向的链接，如果一切正常（状态200）而不是真正的重定向：

return url_for('index')

并使用你的js处理它：

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

如何使用Flask和jQuery重定向

2 个答案: