在現代Web開發中，特別是隨著前后端分離架構的普及，跨域問題成為了開發者必須面對的一個重要議題。本文將詳細介紹什么是跨域問題、其產生的原因以及如何從前端和后端兩個角度來解決這個問題，并提供一些實用的代碼示例。

一、跨域問題概述

1.?定義

跨域問題是指當一個資源試圖從一個源加載時，如果該資源的域名、協議或端口號與當前網頁的域名、協議或端口號不同，則會被瀏覽器阻止訪問。這是為了防止惡意網站讀取另一個網站的數據，從而保護用戶的隱私和安全。

2.?常見場景

• 前端頁面部署在一個服務器上，而后端API部署在另一個服務器。
• 開發環境與生產環境使用不同的域名或端口。

例如：

• https://example.com/api?與?https://example.com:8080/api?不同源（端口不同）
• https://example.com/api?與?http://example.com/api?不同源（協議不同）
• https://example.com/api?與?https://sub.example.com/api?不同源（域名不同）

二、跨域問題產生原因

1.?同源策略

瀏覽器遵循同源策略（Same-origin policy），即只有當請求的URL的協議、域名和端口號都相同的情況下，才允許獲取資源。任何一項不匹配都會導致跨域問題。

2.?預檢請求（Preflight Request）

對于非簡單請求（如PUT, DELETE等），瀏覽器會先發送一個OPTIONS請求到目標服務器，詢問服務器是否允許此次跨域請求。如果服務器響應正確，瀏覽器才會繼續發送實際請求。

三、解決方案

（一）前端解決方案

1.?Proxy代理

在開發環境中，可以使用前端工具（如 Webpack Dev Server、Vite）配置代理服務器，將跨域請求轉發到目標服務器。

示例（Vue.js/Vite 配置）：

// vite.config.js
export default defineConfig({server: {proxy: {'/api': {target: 'http://backend-api.com',  // 后端API地址changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, '')}}}
})

原理：
前端請求發送到同域名的代理服務器（如http://localhost:3000/api），代理服務器再將請求轉發到實際的后端服務器（如http://backend-api.com），從而避免瀏覽器的同源策略限制。

2.?JSONP

JSONP 是一種古老的跨域解決方案，利用了<script>標簽不受同源策略限制的特性。

工作流程：

1. 前端動態創建<script>標簽，src 指向后端 API，并添加回調函數名作為參數（如callback=handleData）
2. 后端收到請求后，將 JSON 數據包裝在回調函數中返回（如handleData({"name":"John"})）
3. 瀏覽器執行返回的 JavaScript 代碼，觸發回調函數處理數據

示例代碼：

function loadData() {const script = document.createElement('script');script.src = 'http://api.example.com/data?callback=handleData';document.body.appendChild(script);
}function handleData(data) {console.log('Received data:', data);
}

缺點

• 只支持 GET 請求
• 安全性較低，容易受到 XSS 攻擊
• 僅適用于與支持 JSONP 的 API 交互

（二）后端解決方案

1.?CORS（Cross-Origin Resource Sharing）

CORS是一種W3C標準，它允許服務器聲明哪些源站通過瀏覽器有權限訪問哪些資源。下面是一個基于Gin框架的Go語言實現示例：

package middlewaresimport ("net/http""github.com/gin-gonic/gin"
)func Cors() gin.HandlerFunc {return func(context *gin.Context) {method := context.Request.Method// 允許所有域名進行跨域調用context.Header("Access-Control-Allow-Origin", "*")// 允許任何請求頭context.Header("Access-Control-Allow-Headers", "Content-Type,AccessToken,X-CSRF-Token, Authorization, Token,x-token,X-User-Id")// 允許任何方法（POST、GET等）context.Header("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE,UPDATE")// 允許瀏覽器解析的頭context.Header("Access-Control-Expose-Headers", "Content-Length, Access-Control-Allow-Origin, Access-Control-Allow-Headers, Content-Type")// 允許攜帶Cookiecontext.Header("Access-Control-Allow-Credentials", "true")// 處理預檢請求if method == "OPTIONS" {context.AbortWithStatus(http.StatusNoContent)}// 繼續處理請求context.Next()}
}

關鍵響應頭說明：

• Access-Control-Allow-Origin：指定允許訪問資源的源，可以是具體域名或*（允許所有）
• Access-Control-Allow-Methods：允許的 HTTP 方法
• Access-Control-Allow-Headers：允許的請求頭
• Access-Control-Allow-Credentials：是否允許攜帶 Cookie
• Access-Control-Max-Age：預檢請求的緩存時間

注意事項：

• 生產環境應避免使用*，而是指定具體的域名
• 如果設置了Access-Control-Allow-Credentials: true，則不能使用*
• 預檢請求（OPTIONS）需要快速響應，通常返回 204 狀態碼

四、生產環境中的跨域配置建議

1. 精細控制 CORS 設置：

   • 避免使用Access-Control-Allow-Origin: *，應指定具體的前端域名
   • 嚴格限制允許的請求頭和方法
   • 僅在必要時啟用Access-Control-Allow-Credentials

2. 使用 HTTPS：混合使用 HTTP 和 HTTPS 可能導致跨域問題，建議前后端均使用 HTTPS。

3. 監控預檢請求：確保服務器正確處理 OPTIONS 請求，避免性能瓶頸。

4. 考慮 CDN：靜態資源（如 CSS、JS、圖片）可以部署到 CDN，避免跨域問題。

五、總結

跨域問題是Web開發中不可避免的一部分，尤其是在前后端分離的趨勢下。了解其背后的原理有助于我們選擇合適的解決方案。一般來說，后端通過配置CORS是最直接有效的方式，而前端則可以通過代理或者JSONP等方式作為補充。合理地應用這些技術，可以有效地提升用戶體驗，同時確保系統的安全性。

如果這篇文章對大家有幫助可以點贊關注，你的支持就是我的動力😊！