本頁只練什麼
能從 URL 與 origin 判斷頁面由檔案系統或本機伺服器提供。
開啟來源會影響 origin、資源請求、CORS 與部分 Web API；不先確認來源，後面的錯誤很容易判斷錯方向。
要修改的檔案：files/starter/index.html
定位：先看網址列是 file: 還是 http:，再對照畫面 protocol。｜依 starter-1 定位，只修改「file:// 與 localhost 的資源來源差異」的責任。
LESSON-01 · TOPIC 01
file:// 與 localhost 的資源來源差異
能從 URL 與 origin 判斷頁面由檔案系統或本機伺服器提供。
任務情境
先結果，再原理；完成後要能說出自己看見的證據。
現在的問題
同事說「本機都一樣」，但頁面在雙擊與 localhost 的資源表現不同。
起始狀態：畫面尚未讀取任何 location 值。
完成後要看到
畫面同時列出真實 protocol、origin 與 href，並能說明 file: 與 http: 的差異。
驗收證據：網址列與畫面顯示一致的 protocol、origin、href
何時會用到
頁面直開正常、改用 Live Server 卻失敗，或 fetch/module/CORS 表現不同時先檢查。
常見混淆：localhost 不是公開網站；它是同一台電腦上的本機網路服務，也不等於雙擊 HTML 的 file://。
觀念與最小範例
這段程式是理解起點，不是要你直接跳過 Starter。
file:// 與 localhost 的資源來源差異 File URL versus localhost origin
file:// 是直接讀電腦裡的檔案；localhost 是瀏覽器透過 HTTP 跟本機伺服器要頁面。
正式說法：URL scheme 是 file: 時不經 HTTP server，localhost 則使用 http: 或 https: origin；origin 由 scheme、host 與 port 組成。
在 Console 執行 `({ protocol: location.protocol, origin: location.origin, href: location.href })`。三步完成本主題
每一步都留下可觀察結果；如果沒看到，先看「卡住先查」。
Step 1｜先看見目前缺口，不急著貼答案。
檔案：
files/starter/index.html定位：先看網址列是 file: 還是 http:，再對照畫面 protocol。要做：先重新載入 Starter，記錄目前畫面、DOM、Computed、Console 或文件內容。
預期：能指出「先看網址列是 file: 還是 http:，再對照畫面 protocol。」目前的缺口。
證據：保存 files/starter/index.html 的目前狀態，並指出下一步只會修改哪個檔案責任。
卡住先查：確認開啟的是 files/starter/index.html，且定位到 先看網址列是 file: 還是 http:，再對照畫面 protocol。。
Step 2｜只修改本主題的一個責任。
檔案：
files/starter/index.html定位：先看網址列是 file: 還是 http:，再對照畫面 protocol。要做：按下檢查來源，再分別以 file:// 與 localhost 開本頁，比較三個真實值。
預期：畫面同時列出真實 protocol、origin 與 href，並能說明 file: 與 http: 的差異。
證據：網址列與畫面顯示一致的 protocol、origin、href
卡住先查：先看網址列是 file: 還是 http:，再對照畫面 protocol。
Step 3｜重新載入並以證據驗收，不以『看起來差不多』判定完成。
檔案：
files/starter/index.html定位：先看網址列是 file: 還是 http:，再對照畫面 protocol。要做：重新整理頁面，再逐項比對預期結果與 evidence。
預期：畫面同時列出真實 protocol、origin 與 href，並能說明 file: 與 http: 的差異。
證據：網址列與畫面顯示一致的 protocol、origin、href
卡住先查：先看網址列是 file: 還是 http:，再對照畫面 protocol。
觀察示範
這個示範只讓你看懂概念，不會替你修改 Starter，也不會自動宣告完成。
file:// 與 localhost 的資源來源差異runtime fixture · read-only demo
本主題示範畫面：
protocol:
origin:
href:
驗收證據
勾選只是學習紀錄；真正完成仍要回到 Starter 的實際結果。
提示 1｜方向
先不改檔案，只看網址列最前面的 scheme。
提示 2｜關鍵片段
在 Console 依序讀 `location.protocol`、`location.origin`、`location.href`。
提示 3｜完整解答與原因
完整解答與原因：file:// 的 protocol 是 file:，origin 通常是 null；localhost 的 protocol/origin 則為 http: 與含 port 的 HTTP origin，因為後者真的經過本機伺服器。