fetchが途中でキャンセルされる…
ローカルで JavaScript（フロントエンド）＋ FastAPI（バックエンド）による開発を行っていた際、fetch リクエストが途中でキャンセルされるという不可解な挙動に遭遇しました。
いろいろ調査した結果、VSCode拡張機能「Live Server」の自動リロード機能が原因だったという話です。
開発環境
- フロントエンド：HTML + JavaScript（Live Server 拡張機能）
- バックエンド：Python（FastAPI） + uvicorn
- 使用ブラウザ：Google Chrome（＋Microsoft Edgeでも検証）
現象
fetch 実行後、数秒で ブラウザが勝手にリロードされ、fetch がキャンセルされる。
API 側では処理が完了しているにもかかわらず、ブラウザ側はその応答を待たずに中断される。
原因
VSCodeのLive Serverには、ファイル更新を検知して自動でブラウザをリロードする機能（ライブリロード）がある。
API側で audio.mp3 などのファイルを生成した際、それが「変更」と見なされてリロードが発生。
結果として、リクエスト途中の fetch がキャンセルされていた。
解決までに試したこと
1. HTML・JSの基本構造を確認
-
<button>タグのtype="submit"を疑ったが未使用 - 明示的な
location.reload()などもなし
2. バックエンド（FastAPI）側のログ確認
- 例外発生や処理落ちを疑いログ出力を強化
- 結果：APIは正常終了しており、
fetchが先にキャンセルされていることが判明
3. 処理の重さ・タイムアウトを検証
API側で以下の処理を行っていた：
- 動画から音声抽出（FFmpeg）
- Whisper による文字起こし
これらを段階的にコメントアウトし検証。
- 両方無効 → 正常終了
- Whisperのみ無効 → リロード発生
→ mp3ファイルの生成タイミングが怪しいと仮説立て。
テスト用動画を10秒に短縮しても同様の現象が発生したため、処理時間ではなく「ファイル生成そのもの」がトリガーと判断。
4. 本番サーバーや他ブラウザでも再現
-
uvicornの起動オプション変更（タイムアウト調整など） - Edgeなど他ブラウザで検証 → 状況変わらず
5. 偶然の発見：Live Server経由でないときは正常
Live Serverを使わずに直接HTMLファイルを開いたところ、リロードが発生せず問題なく完了。
解決方法：Live Serverの監視対象から除外
Live Serverの設定ファイル（.vscode/settings.json）で、監視対象から生成ファイルを除外する。
ディレクトリ単位で除外する例：
{
"liveServer.settings.ignoreFiles": [
"**/audioOutput/**",
"**/Output/**"
]
}
ファイルを直接指定して除外する例：
{
"liveServer.settings.ignoreFiles": [
"**/audio.mp3",
"**/result.json"
]
}
補足：Live Serverの「ホットリロード」と「ライブリロード」の違い
今回のLive Serverの挙動は「ホットリロード」ではなく、「ライブリロード」（＝ファイル変更を検知してページ全体を再読み込み）に該当します。
- ホットリロード：特定モジュールだけを更新し、状態を維持したままUIを更新
- ライブリロード：ページ全体をリロード
Live Serverは主に後者の機能を提供しているため、バックエンドが出力したファイルも対象になり得る点に注意が必要です。
おわりに
Live Serverは非常に便利なツールですが、バックエンドで生成されるファイルに反応するとは盲点でした。
同様の現象で悩んでいる方の参考になれば幸いです。