在計算機網絡中，跨域（Cross-Origin） 指的是瀏覽器出于安全考慮，限制網頁腳本（如 JavaScript）向與當前頁面不同源（Origin） 的服務器發起請求的行為。這是由瀏覽器的同源策略（Same-Origin Policy） 強制實施的安全機制。
核心概念詳解
1. 什么是“源”（Origin）？
“源”由三部分組成：
- 協議（Protocol）：如
http://、https:// - 域名（Domain）：如
example.com - 端口（Port）：如
:80（默認端口可省略）
例如：
https://www.example.com:443和https://www.example.com同源（端口隱式相同）。http://api.example.com和http://www.example.com不同源（子域名不同）。https://example.com和http://example.com不同源（協議不同）。
2. 同源策略的限制范圍
當腳本嘗試訪問不同源的資源時，瀏覽器會攔截以下操作：
- AJAX / Fetch 請求：禁止讀取跨域請求的響應（但請求可能實際已發送到服務器）。
- WebSocket 連接：部分瀏覽器限制跨域 WebSocket。
- DOM 訪問：禁止通過
iframe操作跨域頁面的 DOM。 - Cookie/LocalStorage：禁止讀取跨域站點的存儲數據。
為什么需要跨域限制？
-
防御惡意攻擊
- CSRF（跨站請求偽造）：阻止惡意網站利用用戶登錄態偽造請求（同源策略本身不足以防 CSRF，需配合其他機制如 Token）。
- 數據竊取：防止惡意腳本讀取用戶在其他站點的敏感數據（如銀行頁面內容）。
-
保護用戶隱私
避免網站通過腳本非法獲取用戶在其他站點的登錄狀態或歷史記錄。
如何解決跨域問題？
開發者可通過以下方式安全地實現跨域通信：
1. CORS（跨域資源共享） 🌟（主流方案）
- 原理：服務器在響應頭中聲明允許哪些源訪問資源。
- 示例響應頭：
Access-Control-Allow-Origin: https://www.yoursite.com // 允許特定源 Access-Control-Allow-Methods: GET, POST, PUT // 允許的請求方法 Access-Control-Allow-Headers: Content-Type // 允許的請求頭 - 預檢請求（Preflight）：對復雜請求（如帶自定義頭），瀏覽器先發
OPTIONS請求確認權限。
2. JSONP（JSON with Padding）（傳統方案）
- 原理：利用
<script>標簽不受同源策略限制的特性，通過回調函數獲取數據。 - 缺點：僅支持 GET 請求，安全性低（需信任服務器）。
3. 代理服務器（Proxy）
- 原理：將跨域請求轉發到同源服務器，由服務器代為請求目標資源。
- 適用場景：前端開發中常用 webpack-dev-server 代理解決本地開發跨域。
4. WebSocket
- 特點：不受同源策略限制，適用于雙向實時通信。
5. 修改域名（同源化）
- 將前端頁面和后端 API 部署在同一域名下（如
www.example.com和api.example.com→ 通過 DNS 解析為同域）。
真實場景示例
// 前端嘗試請求跨域 API
fetch('https://api.weather.com/data').then(response => response.json()).catch(error => console.error('跨域請求被攔截！'));// 瀏覽器報錯：
// Access to fetch at 'https://api.weather.com/data' from origin 'https://your-site.com'
// has been blocked by CORS policy.
解決方案：
API 服務器需添加響應頭：
Access-Control-Allow-Origin: https://your-site.com
重要注意事項
- 跨域是瀏覽器行為：Postman、curl 等工具不受同源策略限制。
- 簡單請求 vs 預檢請求：GET/POST 帶標準頭屬于簡單請求，直接發送；帶自定義頭會觸發預檢。
- Cookie 跨域：需設置
withCredentials: true+ 服務器響應Access-Control-Allow-Credentials: true。
總結
| 關鍵概念 | 說明 |
|---|---|
| 同源策略 | 瀏覽器安全機制，限制跨源腳本交互。 |
| 跨域觸發條件 | 協議、域名、端口任一不同即構成跨域。 |
| 解決方案 | CORS（推薦）、代理服務器、JSONP（過時）、WebSocket、同源化部署。 |
| 核心目標 | 平衡功能與安全，防止惡意網站竊取數據或偽造請求。 |
理解跨域機制是前后端協同開發的基礎，正確配置 CORS 可兼顧安全性與靈活性。
---從DeepseekR1-1.5B到Qwen-2.5-1.5B蒸餾)
