使用FlaskWTF对后端进行未经授权的ajax POST

Question

简介

嗨。在这个应用程序中，我正在使用flask_login、fetch()和flask_cors来预测要预测的衣服。只有在我尝试使用注册用户帐户登录之前，一切都很好。

---

问题

所以目前，我已经创建了一个用户帐户，他可以在该帐户中做任何他想做的预测。因此，在这里，我有一个代码片段，当用户单击id为#startbutton的预测按钮时，它将向我的烧瓶后端发送POST，预测并返回预测结果。

$("#startbutton").on("click", function(){
let img = webcam.snap()
$('#result').text( 'Predicting...');
$.ajax({
type: "POST",
url:  "http://localhost:5000/predict",
data: img,
success: function(data){
$('#result').text('Predicted Output: ' + data);
}
});
});

在后台，我创建了一个API路由来处理来自javascript的数据，并将记录添加到数据库中。在这里，我使用@login_required来验证登录的用户，并将他的数据发布到数据库中。我还添加了@cross_origin，这样我就可以获得来自ajax调用的数据。

@app.route('/predict', methods=['GET','POST'])
@login_required
@cross_origin(origin='localhost',headers=['Content-Type','Authorization'],supports_credentials=True)
def predict():
if request.method == 'POST':
# get data from drawing canvas and save as image
fileName, filePath = parseImage(request.get_data())

# Decoding and pre-processing base64 image
img = image.img_to_array(image.load_img(filePath, color_mode="grayscale", target_size=(28, 28))) / 255.
# reshape data to have a single channel
img = img.reshape(1,28,28,1)

predictions = make_prediction(img)

ret = ""
for i, pred in enumerate(predictions):
ret = "{}".format(np.argmax(pred))
response = results[int(ret)]
# dump new entry into db
new_entry = Entry(user_id=current_user.id, filename=fileName, prediction=response, predicted_on=datetime.utcnow())
add_entry(new_entry)
return response
return render_template("index.html", index=True, nav=True)

在我声明应用程序和CORS的_init_.py中，我添加了supports_credentials=True，以便CORS支持我的应用程序的凭据。

app = Flask(__name__)
CORS(app, supports_credentials=True)

但是，当我尝试调试并尝试在localhost中运行我的应用程序时，我使用现有的用户帐户登录，并尝试进行预测。但我最终总是会收到一条Error 401(Unauthorized)错误消息，当我进入谷歌chrome控制台查看错误时，我发现它会将我识别为匿名用户。

jquery-3.5.1.js:10099 POST http://localhost:5000/predict 401 (UNAUTHORIZED)
send @ jquery-3.5.1.js:10099
ajax @ jquery-3.5.1.js:9682
(anonymous) @ index.js:49 <------- HERE
dispatch @ jquery-3.5.1.js:5429
elemData.handle @ jquery-3.5.1.js:5233

---

研究

我试着找出是否有人遇到了同样的问题，我设法找到了一个SO帖子，看起来和我现在的帖子类似。此处链接。我试着理解它，但看不到(或无法理解)他的最终决心。

---

编辑

好吧，所以我试图将我当前的ajax代码重新编译到Mozillafetch()中，据说它支持cookie(我想是吗？)，但最终还是收到了一条未经授权的消息。

$("#startbutton").on("click", function(){
let img = webcam.snap()
$('#result').text( 'Predicting...');
fetch("http://localhost:5000/predict", {
method: "POST",
data: img,
ContentType: 'application/json',
credentials: 'include'
})
.then(function(data) {
$('#result').text('Predicted Output: ' + data);
}).catch((err) => {
console.log(err)
})
});

如果有人能帮我，我真的很感激！：(谢谢！：)

Answer 1

所以在经历了3天的痛苦之后，我看到一篇文章说ajax调用默认是异步的，所以为了获得cookie，我只需要将async设置为False。因此，我将ajax代码修改为以下片段：

$("#startbutton").on("click", function(){
let img = webcam.snap()
$('#result').text( 'Predicting...');
$.ajax({
type: "POST",
url:  "http://localhost:5000/predict",
data: img,
crossDomain: true,
async: false,
success: function(data){
$('#result').text('Predicted Output: ' + data);
}
});
});

我知道这不是最佳解决方案(或者是lmao)，所以我愿意看到其他替代方案。