フロントエンドのパフォーマンス最適化:XMLHttpRequestを捨て、フェッチインターフェースを導入する

クズども · 掲載地 2026/03/02 9:02:01

要件:同源の起源の場合、フロントエンドはバックエンドインターフェースにGETおよびPOSTリクエストを送信します。インターフェースは公開されているため認証情報を運ぶ必要がありません。例えば、クッキー情報を要求する際、XMLHttpRequestを使用する場合、設定方法に関わらずリクエストクッキー情報を削除できず、リクエストパッケージの内容が大きくなり、解析にバックエンドリソースを浪費する意味がなくなります。

ネイティブのXMLHttpRequestを使う場合でもjQueryのAjaxを使ってバックエンドにリクエストを送信しても、リクエストのクッキー情報は相同の場合に削除できません。コードは以下の通りです。

ログインが見えます。

というのはwithCredentialsはクロスドメイン向けに設計されています。以下に示すように:

あるいはクッキーを持ち込み、リソースの帯域幅やバックエンドリソースを無駄にすることもあります。

fetchで修正すると、コードは次のようになります。

ログインが見えます。

認証情報は以下のように設定されています:

省略リクエストに認証情報を送ることは決してせず、レスポンスにも認証情報を含めないでください。
同一起源(デフォルト):送信され、同じ発信元要求を含む資格情報のみ。
含めてクロスドメインアクセスでも、必ず認証情報を含めてください。

テスト依頼はとてもクリーンで新鮮で、以下に示しています:

参考：ハイパーリンクのログインが見えます。

[JavaScript] フロントエンドのパフォーマンス最適化:XMLHttpRequestを捨て、フェッチインターフェースを導入する

関連記事