1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

JavaScriptからFlaskへのデータ送信ーajax通信400エラー

Last updated at Posted at 2024-03-19

初めに

Flaskを用いて開発を行っており、JSからFlask側にajaxを使って情報を送ろうとした。
コードは下記通り

var fData = new FormData();
        fData.append(Data1, data1);
        fData.append(Data2, data2);
        fData = Object.fromEntries(fData.entries())
        $.ajax({
            url : 'URL',
            type : 'POST',
            data : JSON.stringify(fData),
            dataType : "json",
            processData : false,
            contentType : "application/json",
            async : false,
          })
        

app.py側はrequest.jsonで受け取る(一応)

data1 = request.json['Data1']
data2 = request.json['Data2']

とりあえずFromの形を作って、そこに情報を入れていき
Json形式でFlask側に送ってみた

問題

いくら改善しても400エラーが消えない…
400エラー:クライアントから送信されたリクエストに、何らかの原因で処理が完了できなかった状態

原因

CSRFへの対策のためにflask-WTFを使用していた為。
AjaxのPOSTリクエストにCSRFトークンを含める必要があるみたい。

解決方法

<meta name="csrf-token" content="{{ csrf_token() }}">".

上記タグをJSに挿入することで解決した。

参考元リンク

Flask and Ajax Post HTTP 400 Bad Request Error

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?