Javascriptのfetchが動きません

Question

質問

はじめてfetchを使ったのですが色んなサンプルコードをコピってもうまくいきません。
試したコードのうち一つがこれですが、res.json()のところでどうしてもSyntaxError: Unexpected end of JSON inputとなります。
いろいろ書き方を変えたりしたのですが解消せず、、

const fetchtest = async (credentials) => {
  const url = "https://test.local/authenticate";
  const data = await fetch(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(credentials)
  }).then(res=>res.json());  // これがエラー「Uncaught (in promise) SyntaxError: Unexpected end of JSON input」
};

fetchtest({
  username: "test",
  password: "test",
});

ブラウザの開発者ツールでレスポンスのペイロードを見ようとしたのですがThis request has no response data available.となってしまっています。ただ、サーバー側のログを見るとちゃんと200で返していて特にエラーにはなっていないです。

XMLHttpRequestを使うと何の問題もなく処理できるので、レスポンスはちゃんとJSONで返ってると思います。
こちらのコードだとブラウザの開発者ツールでもJSONの中身がちゃんと見れました。

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4)
      if (this.status == 200) {
        console.log(xhttp.responseText); // {"message": "OK"} のJSONレスポンス
      }
    }
};
xhttp.open("POST", "https://test.local/authenticate", true);
xhttp.send({
  username: "test",
  password: "test",
});    

参考ですが、サーバー側はFlaskでこれを返してるだけです

# Python3.8
return Response(
    response=json.dumps({"message": "OK"}),
    status=200,
    mimetype='application/json'
)

Comments

[m.ts10806]

.json()ではなくconsole出力してみては。

.then(data => console.log(data))

[SatoKenta]

コードのミスで、Flaskでステータス200ではなく204を返してしまってる場合がありました
204はNo Contentなのでいくらペイロードを設定しても中身は空っぽでJSONとしてパースできてませんでした。

Answer 1

コードのミスで、Flaskでステータス200ではなく204を返してしまってる場合がありました
204の場合はペイロードは無視されるのですね
お騒がせしてすいません

Answer 2

単純に戻り値がjsonではないということでしょう
以下のようにエラーを拾ってください

const fetchtest = async (credentials) => {
  const url = "https://test.local/authenticate";
  const data = await fetch(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body:JSON.stringify(credentials)
  }).then(res=>{
    if(res.ok) return res.json();
    throw new Error(res.status);
  }).catch(e=>{
    console.error(e);
    return "failed";
  }); 
  console.log(data);
};

fetchtest({
  username: "test",
  password: "test",
});