flaskでsubmit時にJSONデータを送信できなくてハマった時のメモ

flaskでSPAを作っていた時の話。
submit時にonsubmitにjavascript関数を動作させデータを送信しようとしてたが、２点ほどハマった部分があった。

submit時に画面遷移を起こしている

submit時に画面遷移を起こしてしまうために上手くデータを送受信できなかった。
コードとしてはこんな感じ。

<form name="input_from" onsubmit="foo();">

onsubmitの最後にreturn false;をつければ画面遷移を抑制できる。

<form name="input_from" onsubmit="foo(); return false;">

header指定がされていない

flask上で、POSTされたデータを受け取る際にこんなコードでデータをとり出そうとしていた。

post_data = request.get_json()

このrequest.get_json()はheaderのContent-Typeが application/jsonでないと上手く動作しないらしい。
Postmanだとデータを受け取れるのに
何故かこちらが作ったJavascriptからデータを送信できない事があるのはこれが原因の模様。
なのでこんな感じのコードを書いた。

var data = JSON.stringify([
  {
    "foo": "bar",
  }
]);

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function () {
  if (this.readyState === 4) {
    console.log(this.responseText);
  }
});

xhr.open("POST", "/api/test");
//↓ここが大事↓
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("cache-control", "no-cache");

xhr.send(data);