未授权 ajax POST 使用 Flask WTF 进行后端

Question

简介

你好。在此应用程序中，我正在使用 flask_login、fetch() 和 flask_cors 来预测正在预测的衣服。一切都很好，直到我尝试使用注册用户帐户登录。

问题

所以目前，我已经创建了一个用户帐户，他可以在该帐户中做任何他想做的预测。所以在这里，我有一段代码，当用户点击带有 id #startbutton 的预测按钮时，它会向我的 flask 后端发送一个 POST，预测和 return 预测结果。

$("#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 来验证登录用户并 post 他的数据到数据库。我还添加了 @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)

但是，当我尝试调试并尝试运行我在本地主机中的应用程序时，我使用现有用户帐户登录，并尝试进行预测。但我总是会收到 Error 401(Unauthorized) 错误消息，当我进入 google 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 post，它看起来与我当前的情况相似。。我试图理解它，但看不到（或理解）他的最终解决方案。

编辑

好的，所以我尝试将我当前的 ajax 代码重新编入 Mozilla fetch()，据说它支持 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)
    })
});

真的真的，realllllly 如果有人能帮助我，我将不胜感激！ :( 谢谢！:)

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），所以我愿意看到其他替代方案。

未授权 ajax POST 使用 Flask WTF 进行后端

Unauthorized ajax POST to backend using FlaskWTF

python

ajax

fetch

flask-login

flask-cors

简介

问题

研究

编辑