WEB PROTOCOLS · 86

URL Anatomy：Browser 到底拿哪個地址去找哪個 Resource

URL 不是一整串不可拆的文字。Scheme、host、port、path、query、fragment 各自扮演不同角色；debug redirect、API endpoint、same-origin、relative link 時，都必須能把它們拆開。

Learning outcomes

能拆解 scheme/host/port/path/query/fragment。
能解釋 relative URL 如何 resolve。
能區分 URL identity 與 resource existence。
能預測不同 origin / endpoint 的影響。

1. URL 結構

https://api.example.com:443/courses/42?lang=zh#overview

scheme   https
host     api.example.com
port     443
path     /courses/42
query    lang=zh
fragment overview

2. Scheme 決定 protocol family

http://
https://
file://

HTTPS 不只是「加密版網址」字樣，而是建立 TLS 保護的 HTTP transport。Browser security policy 也會依 scheme 判斷 origin。

3. Host / Port 決定 connection target

https://example.com
https://example.com:8443

相同 host、不同 port 可以是不同 listener/service，也會影響 origin。

4. Path / Query / Fragment

/courses/42
?sort=score&limit=20
#overview

Path 常參與 server-side routing；query 常傳 filter/options；fragment 通常只在 client/browser 端定位，不會作為 HTTP request target 的 fragment 部分送給 server。

5. Relative URL resolution

current:
https://example.com/lessons/86

link:
../catalog

resolved:
https://example.com/catalog

Relative URL 依 base URL context 解析；這也是 broken link 常見來源。

Project checkpoint：Request Map v1

對首頁、API、lesson、static asset 各寫一個完整 URL，拆出 components，再預測它們是否同 origin。

app:
https://learn.example.com/

api:
https://api.example.com/courses

asset:
https://learn.example.com/app.js

Debug evidence：網址看起來對，卻打到錯 server

先比 scheme/host/port，而不是只看 path。API path 一樣，但 host/port 不同，就可能是完全不同服務。

Knowledge check

Fragment 會直接送給 HTTP server 嗎？
Host 相同但 port 不同，origin 是否相同？
Relative URL 依什麼基準解析？
拆解三個真實 URL 並標出每一部分。