回答編集履歴

要点追記

2024/03/28 15:29

投稿

Refrain

スコア537

test CHANGED Viewed

@@ -3,8 +3,24 @@
 # 解答修正
+## 要点
+1. `fetch`で指定したURLがスラッシュで始まっており、
+   スラッシュで始まるURLは現在のドメインを自動で使う
+   参考: [URL とは何か - ウェブ開発を学ぶ | MDN](https://developer.mozilla.org/ja/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL#%E7%B5%B6%E5%AF%BE_url_%E3%81%A8%E7%9B%B8%E5%AF%BE_url)
+1. VSCodeで実行するとlocalhost + スラッシュ始まりのURLとして評価され、
+   サンプルとは別のURLにリクエストを投げる
+   →**リクエスト先が存在しないのでエラーが発生！**
+1. 仮にドメインまで使用したURLでリクエストを投げても、
+   CORSによるエラーが発生する可能性がある
+   →**元サイトでしか実行できない可能性がある！**
+   参考: [CORS - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN](https://developer.mozilla.org/ja/docs/Glossary/CORS)
+## 詳細
 `fetch`でリクエストを投げた先が存在しないため発生しています。
 例では`fetch('/article/fetch-basics/post/user')`としていますが、これは実質的に`fetch('https://ja.javascript.info/article/fetch-basics/post/user')`となります(下記)。
+参考: [URL とは何か - ウェブ開発を学ぶ | MDN](https://developer.mozilla.org/ja/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL#%E7%B5%B6%E5%AF%BE_url_%E3%81%A8%E7%9B%B8%E5%AF%BE_url)
 ```javascript
 (async () => {
@@ -24,7 +40,6 @@
 })();
 ```
-参考: [URL とは何か - ウェブ開発を学ぶ | MDN](https://developer.mozilla.org/ja/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL#%E7%B5%B6%E5%AF%BE_url_%E3%81%A8%E7%9B%B8%E5%AF%BE_url)
 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](https://developer.mozilla.org/ja/docs/Glossary/CORS)

参考記事追加

2024/03/28 13:09

投稿

Refrain

スコア537

test CHANGED Viewed

@@ -24,5 +24,7 @@
 })();
 ```
+参考: [URL とは何か - ウェブ開発を学ぶ | MDN](https://developer.mozilla.org/ja/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL#%E7%B5%B6%E5%AF%BE_url_%E3%81%A8%E7%9B%B8%E5%AF%BE_url)
 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周りでリクエストが蹴られると思われます。

解答修正

2024/03/28 13:06

投稿

Refrain

スコア537

test CHANGED Viewed

@@ -1,2 +1,28 @@
 `POST`が許可されていないからではないでしょうか？
 `GET`に変えるのはどうでしょうか。
+# 解答修正
+`fetch`でリクエストを投げた先が存在しないため発生しています。
+例では`fetch('/article/fetch-basics/post/user')`としていますが、これは実質的に`fetch('https://ja.javascript.info/article/fetch-basics/post/user')`となります(下記)。
+```javascript
+(async () => {
+  let user = {
+    name: 'John',
+    surname: 'Smith'
+  };
+  let response = await fetch('https://ja.javascript.info/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);
+})();
+```
+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周りでリクエストが蹴られると思われます。