Chrome DevTools「Provisional headers are shown」狀態碼 cancelled 成因：重複請求/預檢/導航取消

現象解讀

• Provisional headers are shown：請求尚未完成（或被取消），Chrome 僅顯示發送前的暫存標頭，非伺服器實際回應標頭。
• Status: (canceled)：瀏覽器主動取消該請求，常見原因：

1. 導航取消：使用者在頁面載入完成前點擊連結/關閉分頁/重新整理。
2. 重複請求去重：同一 URL 短時間內被發起多次（如 <img> 與 CSS background-image 同時請求同一圖片），瀏覽器取消較晚者。
3. Service Worker / Cache 攔截：SW fetch 事件呼叫 respondWith 但未回應，或快取命中導致網路請求取消。
4. CORS 預檢失敗：OPTIONS 預檢未通過，實際請求被瀏覽器攔截取消。

排查步驟

1. 開啟 Network 面板勾選 Preserve log，重現操作觀察請求發起者。
2. 查看 Initiator 欄：若為 document → 導航；script → JS 發起；parser → HTML 解析器預載。
3. 檢查是否有 fetch/XMLHttpRequest 重複呼叫同一 API，加入防抖/取消機制（AbortController）。
4. 若為 CORS，確認伺服器回應 Access-Control-Allow-Origin、Allow-Methods、Allow-Headers 正確。

本案例結論

原詢問者自行解決：「連續請求了兩次」，屬於第 2 種重複請求去重導致首次顯示 Provisional + Canceled。