使用 flask_jwt_extended 发送 post 请求答案

【问题标题】：Send post request with flask_jwt_extended使用 flask_jwt_extended 发送 post 请求
【发布时间】：2020-05-08 00:49:59
【问题描述】：

我正在尝试向使用 flask_jwt_extended 令牌的 Flask 服务器发送发布请求。我不希望页面在每次提交后刷新，我设法使用 jquery 来做到这一点。但是我无法以 flask_jwt_extended 可以验证用户的方式发送 CSRF 令牌。

function myfunction(action, id, csrf_token){
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "http://127.0.0.1:5000/accept", true);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.send(JSON.stringify({
        action: action,
        id: id,
            csrf_token: csrf_token
        }));
}

$(document).ready(function() {
    $(document).on('click', '#my-form', function(event) {
            var action =  $(event.target).attr('value');
            var f = $(this);
            csrf_token = f.find('input[id=csrf_token]');
            myfunction(action, f.find('[name=song_id]').val(), csrf_token)
      return false;
     });
});

@app.route('/accept', methods=["POST"])
@jwt_required
def accept():
    user = get_jwt_identity()
    ...

当我尝试以下操作时，我得到一个 401 错误，这并不奇怪，因为我没有像在表单中那样传递 csrf 令牌。如果我只是在表单上提交一个发布请求，它就可以正常工作。

编辑：在我的后端，我对 flask_jwt_extended 使用以下设置：

app.secret_key = 'loginner'
app.config['JWT_SECRET_KEY'] = 'super-secret'
app.config['JWT_TOKEN_LOCATION'] = ['cookies', 'headers']
app.config['JWT_BLACKLIST_ENABLED'] = True
app.config['JWT_BLACKLIST_TOKEN_CHECKS'] = ['access', 'refresh']
app.config['JWT_COOKIE_CSRF_PROTECT'] = False # the bearer request works when this is False, but ideally it would be True
app.config['JWT_CSRF_CHECK_FORM'] = True

我得到了以下标识：

@app.route('/accept', methods=["POST"])
@jwt_required
def accept():
    user = get_jwt_identity()
    ...

app.config['JWT_COOKIE_CSRF_PROTECT'] = False 时按预期工作

【问题讨论】：

标签： javascript jquery flask csrf-token flask-jwt-extended

【解决方案1】：

您的问题没有说明您如何在客户端处理 JWT，但基本答案是您需要在请求中传递 Authorization 标头（请参阅flask_jwt_extended 文档中页面底部附近的更多信息)。 CSRF 和身份不是一回事，这可能会造成一些混淆。 CSRF 只是帮助您的前端和 API 了解它们可以相互信任。像 flask_jwt_extended 这样的包可以帮助您的后端识别用户并授权请求。

在上面的客户端示例中，您将添加另一个标题行：

// the 'jwt' variable refers to however you have stored the token. Change as needed
xhr.setRequestHeader('Authorization', 'Bearer ' + jwt);

【讨论】：

app.config['JWT_COOKIE_CSRF_PROTECT']= Flase 时有效