当JWT_COOKIE_CSRF_PROTECT=True时Flask POST请求失败

Question

我对flask后端的POST请求只能在JWT_COOKIE_CSRF_PROTECT = False时工作，但是GET请求可以工作

配置:

CSRF_ENABLED = True   
CORS_SUPPORTS_CREDENTIALS = True   
JWT_TOKEN_LOCATION = ['cookies']

我通过axios从Vue应用程序访问flask

const path1 = `/limit_engine/balance`;
axios
.post(path1, { withCredentials: true })
.then((response) => {
console.log(response.data["balance"]);
})
.catch((error) => {
console.error(error);
});

https://flask-jwt-extended.readthedocs.io/en/stable/options/jwt-cookie-csrf-protect建议JWT_COOKIE_CSRF_PROTECT在生产中应该始终为True，所以我不能保持它为False，然后

Answer 1

尝试通过检查报头来调试请求。如果您从浏览器发送请求，您可以使用任何开发工具(例如Chrome)。看看网络选项卡，查找你的POST请求，找出发送了哪些cookie。

如果你不能在请求中找到CSRF令牌，那么你应该将它从后端传递到前端，并将其保存在cookie存储中。

Answer 2

经过整个上午的麻烦，我意识到CSRF令牌只能从请求头中读取，如下所示:https://flask-jwt-extended.readthedocs.io/en/stable/_modules/flask_jwt_extended/view_decorators/而不是从cookie中读取，因此在Vue中您需要手动将此头附加到请求中。

添加到flask应用程序和Vue应用程序的相关源代码:

app.config['JWT_ACCESS_CSRF_HEADER_NAME'] = "X-CSRF-TOKEN"
app.config['JWT_REFRESH_CSRF_HEADER_NAME'] = "X-CSRF-REFRESH-TOKEN"
app.config['JWT_CSRF_IN_COOKIES'] = False

在你的flask app登录函数中:

from flask_jwt_extended import (
jwt_required, create_access_token,
jwt_refresh_token_required, create_refresh_token,
get_jwt_identity, set_access_cookies,
set_refresh_cookies, get_raw_jwt, get_csrf_token
)
new_token = create_access_token(identity=current_user.id, fresh=False)
new_refresh_token=create_refresh_token(identity=current_user.id)
response = jsonify({
'data': {
'message':'Ok',
'type': 'user',
'id': current_user.id,
'meta': {
'accessToken': new_token,
'access_csrf_token': get_csrf_token(new_token),
'refreshToken': new_refresh_token,
'refresh_csrf_token': get_csrf_token(new_refresh_token)
}
}
})
set_refresh_cookies(response, new_refresh_token)
set_access_cookies(response, new_token)
return (response)

在您的Vue应用程序的登录功能"编辑，如果你使用或不刷新令牌逻辑";

axios.defaults.headers.common['X-CSRF-TOKEN']=response.data.data.meta.access_csrf_token
axios.defaults.headers.common['X-CSRF-REFRESH-TOKEN']=response.data.data.meta.refresh_csrf_token

最后在你的Vue TokenRefreshPlugin或你使用的方法中做同样的事情

我想还有更多的方法，比如从cookie中获取CSRF标头，但至少现在这个方法似乎对我有效。重要的一点是在Vue请求中手动添加这些头，因为使用axios.defaults.withCredentials = true是不够的。

检查头也包括请求中的csrf令牌，如akdev建议的。

Answer 3

您可以为请求添加CSRF异常。

或遵循:-https://flask-jwt-extended.readthedocs.io/en/3.0.0_release/tokens_in_cookies/