# 一個於本機開發網站時，模擬兩個不同Domain的簡單方式(Live Sever)

> **不需要同時開兩個 Live Server / 兩個 Port**，也能在瀏覽器上看到「不同網域」帶來的差異。

---

## 什麼時候你會需要這樣做？

你會想「模擬兩個不同網域」通常是因為前端在開發或除錯時，遇到下面這些情境：

### 你想測「不同網域」帶來的行為差異
- **CORS**：前端（A 網域）呼叫 API（B 網域）是否被瀏覽器擋住、哪些 header 要加
- **Origin 不同**：瀏覽器判定的 `Origin`（scheme + host + port）不同
- **localStorage / sessionStorage 分離**：不同網域的 storage 是隔離的
- **Cookie 範圍**：不同網域會是不同 cookie jar（但 SameSite / third-party 行為還有更多細節，見下方限制）

### 你想最省事、最低成本地「做出兩個網域」
- 不想裝 Nginx / Caddy
- 不想啟兩個前端 dev server
- Live Server 在同一個 VS Code 視窗內只允許一個 server（所以同時兩個 port 不容易）

---

## 這招到底在做什麼？

核心概念：
**用Vs Code 擴充套件Live Server開一個單一 port**，但讓你用 **不同 host（網域）+ 不同 path（路徑）** 指到不同的站台內容。

你會得到：
- `a.test:5500` 與 `b.test:5500` 兩個「不同 host」
- `SiteA/` 與 `SiteB/` 兩個「不同路徑」對應兩份靜態內容

---

## 適用 / 不適用（很重要）

### ✅ 適用
- 你要快速驗證 **CORS / Origin** 行為
- 你要模擬「兩個前端站」之間的互相跳轉、開新分頁
- 你要測 `localStorage` 在不同網域下是否隔離
- 你要重現「A 網域呼叫 B 網域」的瀏覽器限制（例如 fetch 失敗、preflight）

### ⚠️ 不適用 / 有限制
- 你想要「每個網域都是站台根目錄（/）」的真實部署感
> 這招是用 path 分流，所以 `a.test:5500/` 仍然是同一個 server 的根
- 你要測「真的跨站 cookie」或第三方 cookie（SameSite / ITP 等）
> 這通常需要 **兩個獨立站**（不同 server 或反向代理），甚至要 HTTPS 才像真實環境
- 你要讓後端依 Host Header 回不同內容
> Live Server 通常不做這種 host-based routing

如果你的需求落在上面限制區，通常要改用：
- 兩個 dev server（兩個 port）或
- 反向代理（Caddy/Nginx）用 Host 分流到不同 upstream

---

## 1) 專案資料夾結構（同一個 workspace）

把兩個站台放在同一個 workspace 之下：

workspace/
  SiteA/
    product_A.html
    
  SiteB/
    product_b.html
    

---
## 2) 只啟動一次 Live Server

在 VS Code 對 `workspace`（或任一 html）按 **Open with Live Server**。
假設 Live Server 跑在：

- `http://127.0.0.1:5500/`

你可以先確認兩個站台路徑都可開：

- `http://127.0.0.1:5500/SiteA/`
- `http://127.0.0.1:5500/SiteB/`

---

## 3) 修改 hosts（把兩個網域指到本機）

### hosts 檔案路徑
- `C:\Windows\System32\drivers\etc\hosts`

### 編輯方式（需要系統管理員權限）
1. 以系統管理員身分開啟「記事本」
2. **檔案 → 開啟** → 貼上 hosts 路徑
3. 檔案類型選「所有檔案 (*.*)」
4. 在 `hosts` 加上以下兩行後存檔：

127.0.0.1  a.test
127.0.0.1  b.test

---

## 4) 用不同網域（同一個 Port）開不同站台路徑

- `http://a.test:5500/SiteA/`
- `http://b.test:5500/SiteB/`

✅ 這樣「網域不同」會造成 **Origin 不同**（因為 host 不同），但只用到 **一個 Live Server / 一個 port**。

---

## 快速驗證：我真的變成不同 Origin 了嗎？

你可以在兩邊頁面各開 DevTools Console，輸入：

location.origin

你應該會看到不同的結果，例如：
- 在 `a.test:5500` 看到：`http://a.test:5500`
- 在 `b.test:5500` 看到：`http://b.test:5500`

也可以驗證 storage 是否隔離（在 A 設值、到 B 看不到）：

localStorage.setItem("hello", "from-a")
localStorage.getItem("hello")

---

## 常見問題

### Q1：改 hosts 沒生效？
在 CMD 執行：

ipconfig /flushdns

或測一下：

ping a.test
ping b.test

確認是否都指到 `127.0.0.1`

---

### Q2：Live Server 的 port 不是 5500？
Live Server 可能會改用其它 port（例如 5501、5502）。
以實際顯示的網址為準，然後把 `:5500` 換成你的 port 即可。

---

### Q3：想讓 `a.test:5500/` 就是 site-a（不想要 /site-a/ 這段路徑）
那就不是這個「單一 Live Server」技巧能做到的；你需要：
- 反向代理（Caddy/Nginx）做 host-based routing，或
- 兩個獨立 dev server（兩個 port）

---

###### tags: VSCode, Live Server, hosts, CORS