はじめに
ファイルアップロードの実装の際に，HTTP通信の表題のようなエラーが出ました．今までJSON形式でデータを送信していたのですが，画像送信をする際のサンプルでFormDataを用いる方法を用いていたので通信方式が変わるらしく生じたエラーのようです．
Web系のアプリ製作の初心者であり，変なことを言っている可能性が非常に高いので，詳しい方は間違いを見つけ次第ご指摘お願いします．
そもそもこのエラーが出る原因
JSON形式の送信ではありえない1文字目に， "-" という文字が混入していた場合に起こります．（普通は"{"であるはず）
私の場合，送信内容がJSON形式でなく，multipart/form-data形式で送信していたため，下記のようなデータを送信していたのでエラーが生じたようです．
-----------------------------54363239114604
Content-Disposition: form-data; name="user_name"
hogehoge
-----------------------------54363239114604
Content-Disposition: form-data; name="user_feature"
hagehage
… 続く
最初が"-"となっていることがわかると思います．
実行環境
Client側：Submitボタンを押した時点で，FormDataを用いてデータをまとめ，fetchによりデータをPOSTする．
Server側：app.post()を用いてデータを受信
最初のコードの概形
Client側
let formData = new FormData();
formData.append("user_name", "hogehoge");
formData.append("user_feature", "hagehage");
//…続く
for (var item of formData) console.log(item); //← 普通にformDataの内容が表示できる
fetch("http://localhostのどこかやで", {
method: "POST",
headers: {
'Content-Type': 'application/json;charset=utf-8' //← 要はここが間違い
},
body: formData
});
Server側
app.post('送信先', (req, res) => {
// 処理
});
修正後のコードの概形
Client側
let formData = new FormData();
formData.append("user_name", "hogehoge");
formData.append("user_feature", "hagehage");
//…続く
for (var item of formData) console.log(item); //← 普通にformDataの内容が表示できる
fetch("http://localhostのどこかやで", {
method: "POST",
//← ★もはやHeadersを変更
body: formData
});
Server側
const multipart = require('connect-multiparty'); //← ★npm installする必要あり
app.use(multipart()); //← ★なんか設定しないといけないみたい
app.post('送信先', (req, res) => {
// 処理（変化なし）
});
ちなみに，Headersを削除せずにmultipart/form-dataの設定を実装すると，Server側でStreamが停止するエラーが出ました．Headersを削除したらそのエラーもなくなったので，ここは実装しないほうがいいかと思います．
おわりに
HTMLもCSSも経験したことない未熟者が，いきなりReactに手を出してできるものではありませんでした．知識がないとこれには気づけませんね．しかし，headersの設定を意図的になくすことで自動的に設定してくれたり，ライブラリを入れるだけで解決したり，javascriptは非常に便利だと最近感じ始めました．
参考文献
・multipart/form-dataを用いた通信について
・通信内容の調べ方について
・通信内容を調べるのはOWASP ZAPというソフトでもできる可能性（自分にはまだ早かった）．