ajaxでCSRFトークンをヘッダーに設定しPOSTする方法(flask)

jinjaファイル内で記述したjavascriptで画像データを取得後、CSRF対策を行いながらflaskにajaxでPOST送信したいと考えています。以下のコードでajaxのヘッダーにCSRFトークンを設定したいのですが、400(BAD REQUEST)とエラーが出てしまいます。ヘッダーの設定方法はこのサイトを参考にしました。
エラーの内容：
jquery.min.js:formatted:4210 POST http://127.0.0.1:5000/image_base/24 400 (BAD REQUEST)
jquery.min.js:formatted:4210の内容：（この箇所で failed to load resource: server responded with a status 400と表示されています）
g.send(b.hasContent && b.data || null),

質問：
①ヘッダーの設定方法に誤りがあるでしょうか。
②POSTを受け取る側のflask内でCSRFに関するチェックを行う必要があるでしょうか。

HTML
1<body>
2....
3<meta name="csrf-token" content="{{ csrf_token }}">
4...
5</body>

javascript
1$.ajax({
2     url:"/image_base/{{new_menu_id}}",
3     type: "POST",
4     headers:{'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}、
5     data:{"image": response},

python
1#/image_base
2if request.method == "POST":
3    enc_data = request.form['image']
4    dec_data = base64.b64decode(enc_data.split(',')[1])
5    dec_img = Image.open(BytesIO(dec_data))
6    filepath = '/upload/pictures/' + str(image_id) + '.png'
7    dec_img.save(filepath)

退会済みユーザー

2021/12/29 01:43

タイトル直した方が良いですよ。「脆弱性を突いて POST したい」と読めます。

行動規範の内容に同意します

回答1件

自己解決

以下の方法で動作しました。但し、当初何が原因で動作しなかったのかは不明です。

HTML
1<!--
2HTML中でのCSRF_tokenは中止
3<meta name="csrf-token" content="{{ csrf_token }}">
4-->

javascript
1var csrf_token = "{{ csrf_token() }}";
2
3$.ajaxSetup({
4    beforeSend: function(xhr, settings) {
5       if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain){
6           xhr.setRequestHeader("X-CSRFToken", csrf_token);
7       }
8    }
9});
10  
11$.ajax({
12   url:"/image_post/{{new_menu_id}}",
13   type: "POST",
14   data:{"image": response},
15...
16

python
1#/image_base
2if request.method == "POST":
3    enc_data = request.form['image']
4    dec_data = base64.b64decode(enc_data.split(',')[1])
5    dec_img = Image.open(BytesIO(dec_data))
6    filepath = '/upload/pictures/' + str(image_id) + '.png'
7    dec_img.save(filepath)