[解決済み] fetch() がヘッダを送信しない？

質問

ブラウザからこのようなPOSTリクエストを送信しています。

fetch(serverEndpoint, {
    method: 'POST',
    mode: 'no-cors', // this is to prevent browser from sending 'OPTIONS' method request first
    redirect: 'follow',
    headers: new Headers({
            'Content-Type': 'text/plain',
            'X-My-Custom-Header': 'value-v',
            'Authorization': 'Bearer ' + token,
    }),
    body: companyName
})

リクエストがバックエンドに到達するまでに、このリクエストには X-My-Custom-Header また Authorization ヘッダを生成します。

私のバックエンドはGoogle Cloud function for Firebase（基本的にNode.jsのエンドポイントだけ）で、以下のような感じです。

exports.createCompany = functions.https.onRequest((req, res) => {
    let headers = ['Headers: ']
    for (let header in req.headers) {
        headers.push(`${header} : ${req.headers[header]}`)
    }
    console.log(headers)
    ...
}

そのGoogle Cloud for Firebaseの関数のコンソールログには X-My-Custom-Header もなく Authorization ヘッダを生成します。

何が間違っているのでしょうか？

編集1

Chromeの開発ツールで確認したところ、どちらも X-My-Custom-Header でも Authorization ヘッダがブラウザから送信される... ここで疑問が生じます。なぜ、どのようにそれを修正するのですか？

編集 2

私のアプリについての詳細です。Reactアプリです。サービス ワーカーを無効にしています。私は Request を作成し、具体的にヘッダを追加するには req.headers.append() . それでもヘッダは送信されません。

どのように解決するのですか？

この セイムオリジンポリシー は、Web ページが他のオリジンからのリソースに送ることができるリクエストの種類を制限します。

では no-cors モード の場合、ブラウザは「単純な」リクエストの送信に制限されます。 セーフリストに載ったメソッド と セーフリストに載ったヘッダ のみです。

のようなヘッダを持つクロスオリジンリクエストを送信するには、次のようにします。 Authorization と X-My-Custom-Header を削除する必要があります。 no-cors モードを廃止し、プリフライトリクエストをサポートする ( OPTIONS ).

単純な」リクエストと「単純でない」リクエストの区別は、歴史的な理由によるものです。Web ページはさまざまな手段 (フォームを作成して送信するなど) で常にいくつかのクロスオリジンリクエストを実行できたので、Web ブラウザがクロスオリジンリクエストを送信する原則的な手段を導入したとき ( クロスオリジンリソース共有 や CORS) を導入したとき、そのような「単純な」リクエストはプリフライトの対象外であると決定されました。 OPTIONS のチェックを免除することにしました。