フロントサイドからサーバーサイドのExpressで作成したpatchメソッドに接続する方法

expressを用いてAPIの開発を行っています。
現在、req.body（JSONの想定）にてデータを修正する
app.patchのメソッドは作成が完了しており、
insomniaなどでの動作確認は完了しています。

js
1  app.patch("/update/:id", async function (req, res) {
2   ...
3});

また、req.bodyのデータを登録するpostも同様に作成しており、
その疎通は完了しています。

js
1  app.post("/create", async function (req, res) {
2   ...
3});

html
1<script>
2          let xhr=new XMLHttpRequest();
3            let exp = new Object();
4     exp= {
5        JSONのデータ
6     };
7        let result=document.getElementById('result');
8        xhr.open("post", "http://localhost:3000/create",true);
9        xhr.setRequestHeader('content-type', 'application/json; charset=utf-8');
10        x.send(JSON.stringify(exp));
11</script>

いくつかのサイトを検索し、下記の修正を行ったのですが
サーバ側のログを見る限りでは、そもそも
上記jsのメソッドまで到達していないようです。

html
1<script>
2        xhr.open("patch", "http://localhost:3000/update",true);
3</script>

patch→putであれば上手くいくのですが、
app.patchを機能させたいと思っております。
二つ質問させてください。

①XMLHttpRequestでapp.patchに接続する方法はないででしょうか？
②XMLHttpRequestを使用せずにjsを用いてapp.patchに接続する方法があれば教えてください。

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

回答1件

ベストアンサー

XMLHttpRequestは今時使わないです
fetch使いましょう

(async ()=>{
    const response = await fetch('http://localhost:3000/update', 
        {'method': 'patch',
          body: JSON.stringify(data),
          headers:{
            'Content-Type': 'application/json'
          },
        }
    );
    console.log(response);
})();

同一ドメインでない場合は他にも設定が必要です。

投稿2020/11/14 17:41