Uncaught (in promise) SyntaxError: Unexpected end of JSON input at …が解決できない

2024/03/29 11:27

(async () => { let user = { name: 'John', surname: 'Smith' }; let response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits', { method: 'POST', headers: { 'Content-Type': 'application/json;charset=utf-8' }, body: JSON.stringify(user) }); let result = await response.json(); alert(result.message); })() でも試しましたが駄目でした。 fetchのURLの問題のようなのですがよくわかりません。具体的な修正の解答を希望しています。

2024/03/29 12:24

ID取り直して同じ質問してます？なにか意味があるのでしょうか？

2024/03/29 12:34

久しぶりに投稿しまして、やり方がわからなくて、アカウントを取り直しました。昔のアカウントに戻して、新しいアカウントを削除したいと思っています。 teratailに問い合わせ中です。こちらで再度投稿させていただきました。

2024/03/29 12:44

まぁどちらかに統一してもらえばよいです。マルチポストするとそれぞれで別の回答が進行してしまって質問者さん自身が困ることになると思うので・・・

2024/03/29 12:48

前の質問の回答にあった通り、/article/fetch-basics/post/user にJSONファイルを置くのがいいでしょう。ファイルの置き方がわからないとのことですが、JSONファイルはVSCodeで作成編集することができますので、試してみてはどうでしょうか。ただ試していませんが、パスに拡張子が含まれていないので、正しいMIMEタイプのレスポンスにならないかもしれません。user.jsonなどにして、読み込みのパスもそちらに合わせた方が無難かもしれません。

2024/03/29 13:21

恥ずかしいのですが、今作成しているfetchフォルダに/article/fetch-basics/post/user のJSONファイルを作成するということでしょうか。 article、fetch-basics、post、はフォルダということですよね？ user.jsonでやってみます。これから夜勤です。休みが4日ほどありますのでこの１週間でfetchの章を何とかしたいので、よろしくお願いいたします。

2024/03/29 14:48

『今作成しているfetchフォルダ』というのがちょっとこちらからだとわからないのですが、プロジェクトのルートのに作る必要があります。 index3-2.html が http://127.0.0.1:5500/index3-2.html であるなら、おそらくそれで合っていると思います。

2024/03/29 16:39

ありがとうございます。出先なので、朝方からやりたいとおもっています、

2024/03/29 20:19

以下のコードで試しましたがまだ解決できていません。 1.fetch/article/fetch-basics/user.jsonを作成して、 <script> (async () => { let user = { name: 'John', surname: 'Smith' }; let response = await fetch('/1.fetch/article/fetch-basics/post/user', { method: 'POST', headers: { 'Content-Type': 'application/json;charset=utf-8' }, body: JSON.stringify(user) }); let result = await response.json(); alert(result.message); })() </script> さらに以下でも同じエラーになります <script> (async () => { let user = { name: 'John', surname: 'Smith' }; let response = await fetch('/1.fetch/article/fetch-basics/post/user.json', { method: 'POST', headers: { 'Content-Type': 'application/json;charset=utf-8' }, body: JSON.stringify(user) }); let result = await response.json(); alert(result.message); })() </script>

2024/03/30 00:36

前の質問の回答にもあったとおり、Live Server は POSTリクエストを受け付けないので、メソッドを GET に変えて、body を消す必要があります。

2024/03/30 02:08

元の質問を閉じるという話だったかと思いますが、あちらでも継続しているようです。いわゆるマルチポストはteratailでは推奨されていません。この状態ですと、片方の質問でしか共有されていない状況が起き、すでに解決している問題について回答者が労力を払う、などの問題が起きます。あちらで継続されるのであれば、この質問に削除申請を出してください。

2024/03/30 12:38

この質問の削除申請の仕方がわかりません。一応teratailに問い合わせとぃるのですがいつまでたってもteratail初心者ですみません。

2024/03/30 14:01

削除申請しました。うまくいくかどうかわかりません。

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

回答2件

ベストアンサー

HTMLは↓で、

html
1<!DOCTYPE html>
2<script>
3    "use strict";
4
5    (async () => {
6        let user = {
7            name: 'John',
8            surname: 'Smith'
9        };
10
11        let response = await fetch('/article/fetch-basics/post/user', {
12            // method: 'POST',
13            headers: {
14                'Content-Type': 'application/json;charset=utf-8'
15            },
16            // body: JSON.stringify(user)
17        });
18
19        let result = await response.json();
20        alert(result.message);
21    })()
22</script>

フォルダ構成は↓で動作しました。

投稿2024/03/30 00:39

総合スコア37409

2024/03/30 12:38

ご教授頂いたhtmlと{}userを使って、vscodeのGoLiveで実行すると、 Google Chromeのconsoleに以下のエラーが出ています。 Uncaught (in promise) SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON どうすればいいのでしょうか？

2024/03/30 18:28

回答ありがとうございます。試したところ問題が解決しました！ベストアンサーに選ばせていただきました。実行コード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>POSTリクエスト</title> </head> <body> <script> (async () => { let response = await fetch('user.json', { }) let result = await response.json(); alert(result.message); })(); </script>  </body> </html> //user.json 　index3-2.htmlと同じところに置き実行できました。 //ここから元のコードに挑戦してみます。ありがとうございました

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

結論から言えばfetchのpostデータは原則formdataで作成してください

javascriptlet
1const user = {
2  name: 'John',
3  surname: 'Smith'
4};
5const url="...";
6conts body=Object.entries(user).reduce((x,y)=>(x.append(y[0],y[1]),x),new FormData());
7fetch(url, {
8  method: 'POST',
9  body,
10}).then(res=>res.text()).then(console.log);

headerでcontent-type:application/jsonで送った場合、サーバー側は標準入力で処理がされるためpostとして認識されません。試せる環境がphpしかないのでphpを例にするとサーバー側の書き方はこんなふうになります

PHP
1<?PHP
2print_r(json_decode(file_get_contents('php://input')));

あえてサーバー側に特殊な処理をさせるよりは最初からpostデータとしてできる前述のようなjsを書くようにしてください

投稿2024/03/30 15:28

総合スコア117615

2024/03/30 16:35

すみません。理解できないので勉強しなおしてからやります

2024/03/30 16:56 編集

単純に命題のjsではサーバー側の手厚い処理が必要になるということです。 fetchでpost送信時は以下２点を注意する (1)無用なheaders設定をしない (2)formdata形式でデータを受け渡すということです。おそらく参考にされている情報が非効率もしくは間違っているようです。検証のため私の例示した形式でGoLiveにfetchしてみることです