corsエラーについてご教授ください！

Question

・環境
クライアントオリジン→http://127.0.0.1:5500
サーバーオリジン→http://localhost:3000

・解決したいこと
deleteメソッドのcorsエラーを解消したいです。
management.htmlで全てのユーザーが表示された後、それぞれのユーザーの編集ボタンを押下するとsearch.htmlへ飛び、選択した単体のユーザーが表示されます。そこでユーザーを削除するボタンを押下する処理でcorsエラーとなってしまいます。なぜかpostmanでは削除できました、、

・エラー内容
Access to fetch at 'http://localhost:3000/api/v1/users/41' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
users.js:82 DELETE http://localhost:3000/api/v1/users/41 net::ERR_FAILED
deleteUser @ users.js:82
(anonymous) @ index.js:24。
users.js:102 Uncaught (in promise) TypeError: Failed to fetch

・試したこと
originが異なるのでサーバーからのレスポンスヘッダーに('Access-Control-Allow-Origin', ' * ')を付与しましたが解決できず、
OPTIONSでdeleteメソッドを許容しているか確認したところ、以下のレスポンスとなりました。
$ curl -X OPTIONS "http://localhost:3000/api/v1/users/1" -v

• Trying ::1...
• TCP_NODELAY set
• Connected to localhost (::1) port 3000 (#0)

OPTIONS /api/v1/users/1 HTTP/1.1
Host: localhost:3000
User-Agent: curl/7.64.1
Accept: /

< HTTP/1.1 200 OK
< X-Powered-By: Express
< Allow: GET,HEAD,PUT,DELETE
< Content-Type: text/html; charset=utf-8
< Content-Length: 19
< ETag: W/"13-dU6690u+/fZ3lEqFItU6CiBI3Wo"
< Date: Thu, 10 Jun 2021 05:30:06 GMT
< Connection: keep-alive
<

• Connection #0 to host localhost left intact

GET,HEAD,PUT,DELETE* Closing connection 0

こちらも問題なさそうだったので後は何だろうと類似スレッドを見ていたら、deleteではプリフライトリクエストがdelete実行前に走り、これに該当した場合も形式上corsエラーとなるようですが原因が思い浮かびません。
何か参考になるアドバイスをいただけないでしょうか。よろしくお願いいたします。

app.js

const express = require('express');
const app = express();
const dbPath = "app/db/database.sqlite3"
const path = require('path')

const sqlite3 = require('sqlite3')

app.use(express.urlencoded({extended: true}))
app.use(express.json()) 
app.use(express.static(path.join(__dirname, 'public')))

app.get('/api/v1/users', (req, res) => {
    const db = new sqlite3.Database(dbPath)
    res.set('Access-Control-Allow-Origin', '*' )
    
    db.all('SELECT * FROM users', (err, rows) => {
        res.json(rows)
    })
    db.close()
})


app.get('/api/v1/users/:id', (req, res) => {
    const db = new sqlite3.Database(dbPath)
    const id = req.params.id
    res.set('Access-Control-Allow-Origin', '*' )
    
    db.get(`SELECT * FROM users WHERE id = ${id}`, (err, row) => {
        res.json(row)
    })
    db.close()
})


const run = async (sql, db, res, message) => {
    return new Promise((resolve, reject) => {
        db.run(sql, (err) => {
            if (err) {
                res.status(500).send(err)
                return reject()
                } else {
                res.json({message: message})
                return resolve()
            }
        })
    })
}

app.delete('/api/v1/users/:id', async (req, res) => {
    res.set('Access-Control-Allow-Origin', '*' )
 
    const db = new sqlite3.Database(dbPath)
    const id = req.params.id


        await run (`DELETE FROM users WHERE id = ${id}`,
        db,
        res,
        "ユーザーを削除しました"
    )
    db.close()
})

const port = process.env.PORT || 3000;
app.listen(port);
console.log("Listen on port: " + port)

users.js

const usersModules = (() => {
    const BASE_URL = "http://localhost:3000/api/v1/users"
    const headers = new Headers()

    headers.set('Content-Type', 'application/json')
    
    return {
            setExistingUser: async (uid) => {
            const res = await fetch(BASE_URL + '/' + uid)
            const resJson = await res.json()
            
            let body = `<tr>
                            <td>${resJson.id}</td>
                            <td>${resJson.name}</td>
                            <td>${resJson.kana}</td>
                            <td>${resJson.addess}</td>
                            <td>${resJson.company}</td>
                            <td>${resJson.department}</td>
                            <td>${resJson.phoneNumber}</td>
                            <td>${resJson.post}</td>
                            <td>${resJson.post2}</td>
                            <td>${resJson.contents}</td>
                        </tr>`
               
            document.getElementById('search-list').insertAdjacentHTML('beforeend', body)
        },
            deleteUser: async (uid) => {
            const res = await fetch(BASE_URL + '/' + uid, {
                method: "DELETE",
                headers: headers,
            })
             const resJson = await res.json()
             alert(resJson.message)
             window.location.href = '/'
        }
    }()

index.js

const indexModule = (() => {
    const path = window.location.pathname
    
    switch(path) {
        case '/app/public/management.html':
            return usersModules.fetchAllUsers()
                
        case '/app/public/search.html':
            const uid = window.location.search.split('?uid=')[1]
            
            document.getElementById('delete-btn').addEventListener('click', () => {
                return usersModules.deleteUser(uid)
            })    
            return usersModules.setExistingUser(uid)
        }
})()

management.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HP管理ページ</title>
</head>
<body>
    <h1>お問い合わせ一覧</h1>
    <label for="search">ユーザー名で検索</label>
    <input type="text" id="search">
    <button id="searching-btn">検索</button>

    <table>
        <thead>
            <tr>
                <td>id</td>
                <td>名前</td>
                <td>かな</td>
                <td>メールアドレス</td>
                <td>会社名</td>
                <td>部署名</td>
                <td>電話番号</td>
                <td>住所</td>
                <td>建物/ビル名</td>
                <td>お問い合わせ内容</td>
                <td>管理</td>
            </tr>
        </thead>
        <tbody id="users-list">

        </tbody>
    </table>
    <script src="js/users.js" defer></script>
    <script src="js/index.js" defer></script>
</body>
</html>

search.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>HP管理ページ</title>
</head>
<body>
    <h1>お問い合わせ一覧</h1>
    <div class="container-fluid d-flex">
        <div class="title">
            <label for="search">ユーザー名で検索</label>
            <input type="text" id="search">
            <button id="search-btn">検索</button>
        </div>
        <div class="menu d-flex ml-5">
            <p>このユーザーに
                <button class="btn btn-sm btn-danger" id="edit-btn">返信する</button>
            </p>
            <p class="ml-5">このユーザーを
                <button class="btn btn-sm btn-secondary" id="delete-btn">削除する</button>
            </p>
        </div>
    </div>

    <table>
        <thead>
            <tr>
                <td>id</td>
                <td>名前</td>
                <td>かな</td>
                <td>メールアドレス</td>
                <td>会社名</td>
                <td>部署名</td>
                <td>電話番号</td>
                <td>住所</td>
                <td>建物/ビル名</td>
                <td>お問い合わせ内容</td>
                
            </tr>
        </thead>
        <tbody id="search-list">

        </tbody>
    </table>
    <script src="js/users.js" defer></script>
    <script src="js/index.js" defer></script>
</body>
</html>

Comments

[hoshi-takanori]

OPTIONS で CORS を許可する必要があるはず。
https://qiita.com/chenglin/items/5e563e50d1c32dadf4c3

[cheetoi]

hoshi-takanoriさん、返信ありがとうございます。
DELETEメソッドが対応しているかではなく、異なるoriginからのアクセスを許容しているかでもなく
その前に走るoptionsメソッドがcorsを許可する必要かあったのですね。自身の認識が間違っておりました。こちらの記事で無事に解決できました、本当に助かりました！