API コールが 2 回ヒットする理由：プリフライトと XHR の理解

DevToolsのNetworkタブを検査する際、異なるリクエストタイプ（preflightとxhr）を持つ重複したAPI呼び出しをしばしば見つける。この現象は、CORS（クロスオリジンリソースシェアリング）に関連していることが多い。XMLHttpRequest（XHR）は、クライアントからサーバーにデータリクエストを送信する実際のAPI呼び出しである。一方、preflightリクエストは、ブラウザーが現在のオリジンからリクエストを受け入れるかどうかをチェックするために送信される小さなリクエストである。このリクエストは、通常OPTIONSリクエストであり、進める許可を求めるものである。サーバーが適切なAccess-Control-Allow-*ヘッダーで応答すると、ブラウザーは実際のXHR呼び出しを送信する。ブラウザーはまず、preflightが必要かどうかをチェックし、必要に応じてOPTIONSリクエストを送信し、許可が与えられるとXHRリクエストを送信する。サーバーが許可を拒否すると、XHRリクエストはブロックされる。preflightリクエストを理解することは、QAが重複したAPI呼び出しがバグではなく、セキュリティーの機能であることを知るために重要である。また、CORSのパーミッションをテストし、Access-Control-Allow-Originなどのヘッダーでサーバーの応答を検証するのにも役立つ。