実現したいこと

現代の JavaScript チュートリアル> 引用テキストhttps://ja.javascript.info/で勉強しています。
ネットワークリクエストの3.1,3.2,3.3のコードのlet result = await response.json();付近でエラーがでています。
現代の JavaScript チュートリアルの中のコードをクリックすると正常動作します。

発生している問題・分からないこと

現代の JavaScript チュートリアルの中のコードをクリックすると正常動作します。
が、VSCODEでコピペして実行するとエラーになる。

エラーメッセージ

error
1Uncaught (in promise) SyntaxError: Unexpected end of JSON input
2    at index3-2.html:50:33
3
4：Google Chrome
5this
6: 
7Window
8例外
9: 
10SyntaxError: Unexpected end of JSON input at http://127.0.0.1:5500/1.Fetch/index3-2.html:50:33
11response
12: 
13Response {type: 'basic', url: 'http://127.0.0.1:5500/article/fetch-basics/post/user', redirected: false, status: 405, ok: false, …}
14result
15: 
16<値がありません>
17user
18: 
19{name: 'John', surname: 'Smith'}
20Window
21グローバル

該当のソースコード

JavaScript
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>POSTリクエスト</title>
7</head>
8<body>
9
10  
11
12<script>
13
14  (async () => {
15
16    let user = {
17      name: 'John',
18      surname: 'Smith'
19    };
20
21    let response = await fetch('/article/fetch-basics/post/user', {
22
23        method: 'POST',
24
25        headers: {
26          'Content-Type': 'application/json;charset=utf-8'
27        },
28
29        body: JSON.stringify(user)
30    });
31
32    let result = await response.json();
33
34    alert(result.message);
35
36  })();
37
38</script>
39
40  
41</body>
42</html>
43

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

コードに (async () => {})()を追加して実行しています。

補足

特になし

退会済みユーザー

2024/03/28 12:50

現代の JavaScript チュートリアルの中のコードをクリックすると正常動作します。コードをVscodeで打ち込んで実行しています。

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

回答2件

POSTが許可されていないからではないでしょうか？
GETに変えるのはどうでしょうか。

解答修正

要点

fetchで指定したURLがスラッシュで始まっており、
スラッシュで始まるURLは現在のドメインを自動で使う
参考: URL とは何か - ウェブ開発を学ぶ | MDN
VSCodeで実行するとlocalhost + スラッシュ始まりのURLとして評価され、
サンプルとは別のURLにリクエストを投げる
→リクエスト先が存在しないのでエラーが発生！
仮にドメインまで使用したURLでリクエストを投げても、
CORSによるエラーが発生する可能性がある
→元サイトでしか実行できない可能性がある！
参考: CORS - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN

詳細

fetchでリクエストを投げた先が存在しないため発生しています。
例ではfetch('/article/fetch-basics/post/user')としていますが、これは実質的にfetch('https://ja.javascript.info/article/fetch-basics/post/user')となります(下記)。
参考: URL とは何か - ウェブ開発を学ぶ | MDN

javascript
1(async () => {
2  let user = {
3    name: 'John',
4    surname: 'Smith'
5  };
6  let response = await fetch('https://ja.javascript.info/article/fetch-basics/post/user', {
7    method: 'POST',
8    headers: {
9      'Content-Type': 'application/json;charset=utf-8'
10    },
11    body: JSON.stringify(user)
12  });
13  let result = await response.json();
14  alert(result.message);
15})();

sanchu様の環境ではlocalhostで実行しているため、fetch('http://127.0.0.1:5500/article/fetch-basics/post/user')を実行していることになり、結果としてリクエスト先が見付からずエラーが発生しています。
また、仮にコードでfetch('https://ja.javascript.info/article/fetch-basics/post/user')を実行したとしても、同サイト内でなければCORS周りでリクエストが蹴られると思われます。
参考: CORS - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN

投稿2024/03/28 12:16

編集2024/03/28 15:29

Refrain

総合スコア670

退会済みユーザー

2024/03/28 12:45

回答ありがとうございます。ベストアンサーは別の方を選ばせていただきましたが、こちらの回答も非常に参考になりました。

退会済みユーザー

2024/03/28 12:45

回答ありがとうございます。試してみましたが解決できませんでした。（試した結果の詳細を記載してください）この場合どの辺りに原因がありそうでしょうか？

Refrain

2024/03/28 12:55

リクエスト先のデータは存在しているのですよね？例えば、教科書用のページへの`fetch`のため、ユーザー側には権限が無かったりしませんかね。 `http://127.0.0.1:5500/article/fetch-basics/post/user`にはアクセスできますか？

Refrain

2024/03/28 13:06

解答修正しました

退会済みユーザー

2024/03/28 13:35

ありがとうございます。仕事中なので帰ってからやりたいと思います

退会済みユーザー

2024/03/28 20:38

let response = await fetch('http://127.0.0.1:5500/article/fetch-basics/post/user', として実行してみたのですが、うまくいきませんでした。全体的にわかってないので、大変申し訳ないのですが、具体的どうすればいいのでしょうか？

Refrain

2024/03/28 22:09

追記しましたが、そもそもサイト外では実行できません。そういう仕組みと言うべきなのかもしれませんが、sanchu様の環境には指定いているURL先のファイルはありませんよね？

退会済みユーザー

2024/03/29 05:03

はい、ないと思います。参考のWebを少し勉強しなおして、このfetchの章に挑戦したいとおもいます。勉強しないといけないコードの内容が多すぎて、ご教授していただいた内容の把握が難しい状況です。ありがとうございました。

退会済みユーザー

2024/03/29 05:07

私の環境に指定しているURL先のファイルを作成するには、どうすればいいのでしょうか？できれば、具体的なsampleを示していただければ、ありがたいのですが。

Refrain

2024/03/29 05:39

これを実際に実行する場合、サーバー側の処理まで学んで実装することになり、テキストとは全く違う内容の勉強が必要になるかと思われます。この章はあくまでも`fetch`の使い方の勉強であり、そこが理解できればsanchu様の環境にて実行する必要性は無いかと思われます。テキストを実行することではなく、どんな機能があってどういうときに使えるのかを学ぶ方が、sanchu様の今後にとっても有意義であると考えます。

退会済みユーザー

2024/03/29 10:32

Refrain

2024/03/29 13:15

接続先のCORSポリシー設定に準じた結果と思います。テキストのサイトは別ドメインからのリクエストを蹴っているようですが、Githubは許可しているのでしょうね。単純なコードの違いといった話ではなくなってくるので、サーバーサイドのことを知りたくなったら新たな質問にしてみると良いかもです！

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