跨域問題在前后端分離架構下尤為常見，是每個 Web 開發(fā)者都會遇到的核心問題。本文將通過原理解析、場景剖析、解決方案詳解以及最佳實踐等多個維度，幫助開發(fā)者全面理解并有效應對跨域問題。

---

一、跨域的本質(zhì)

1. 同源策略

跨域問題的根本源于瀏覽器的同源策略（Same-Origin Policy）。同源策略是瀏覽器的一種安全機制，用于限制不同源的文檔或腳本如何彼此交互，以保護用戶的數(shù)據(jù)安全。

• 同源的定義：協(xié)議、域名、端口號必須一致。

  屬性	示例 1	示例 2	是否同源
  協(xié)議	http://example.com	https://example.com	否
  域名	http://example.com	http://api.example.com	否
  端口號	http://example.com:80	http://example.com:8080	否

2. 同源策略的限制范圍

同源策略主要限制以下行為：

• Cookie、LocalStorage 和 SessionStorage 的讀取
• DOM 和 JavaScript 對象的訪問
• AJAX 請求（尤其是跨域數(shù)據(jù)的訪問）

3. 為什么需要同源策略

同源策略主要是為了防止以下安全風險：

• 跨站腳本攻擊（XSS）：惡意頁面通過腳本竊取用戶數(shù)據(jù)。
• 跨站請求偽造（CSRF）：利用用戶身份對目標網(wǎng)站執(zhí)行未授權操作。
• 數(shù)據(jù)劫持：防止不受信任的域竊取敏感信息。

---

二、跨域問題的常見場景

1. 前后端分離

現(xiàn)代 Web 應用通常采用前后端分離架構，前端通過 AJAX 請求與后端進行交互。當前端和后端運行在不同的域時，會觸發(fā)跨域問題。例如：

• 前端：http://localhost:3000
• 后端：http://localhost:8080

2. 第三方服務調(diào)用

前端需要請求第三方 API，例如調(diào)用 https://api.example.com 提供的開放服務，這種場景也會引發(fā)跨域問題。

3. 靜態(tài)資源加載

頁面運行在 http://example.com，而靜態(tài)資源托管在 CDN（如 https://cdn.example.com）上。

4. 跨協(xié)議請求

例如從 HTTP 頁面調(diào)用 HTTPS 服務。

---

三、跨域的解決方案詳解

1. CORS（跨域資源共享）

CORS 是 W3C 提出的標準解決方案，允許服務端通過設置特定的響應頭，告知瀏覽器允許跨域訪問。

• CORS 的關鍵響應頭：
  • Access-Control-Allow-Origin：允許的源（如 http://example.com，或 * 代表允許所有源）。
  • Access-Control-Allow-Methods：允許的 HTTP 方法（如 GET, POST）。
  • Access-Control-Allow-Headers：允許的自定義請求頭（如 Authorization）。
  • Access-Control-Allow-Credentials：是否允許攜帶憑證（如 Cookie）。
  • Access-Control-Max-Age：預檢請求的緩存時間。

CORS 在 Spring Boot 中的配置

Spring Boot 提供了多種方式支持 CORS：

1. 全局配置
   使用 WebMvcConfigurer 添加全局的 CORS 配置。

   @Configuration
   public class WebConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOrigins("http://example.com").allowedMethods("GET", "POST", "PUT", "DELETE").allowedHeaders("*").allowCredentials(true).maxAge(3600);}
   }
   

2. 局部配置
   在控制器類或方法上使用 @CrossOrigin 注解。

   @RestController
   @RequestMapping("/api")
   public class MyController {@CrossOrigin(origins = "http://example.com")@GetMapping("/data")public ResponseEntity<String> getData() {return ResponseEntity.ok("Hello, World!");}
   }
   

3. 通過過濾器統(tǒng)一配置
   使用 OncePerRequestFilter 創(chuàng)建全局 CORS 過濾器。

   @Component
   public class CORSFilter extends OncePerRequestFilter {@Overrideprotected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain)throws ServletException, IOException {response.setHeader("Access-Control-Allow-Origin", "*");response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");response.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");response.setHeader("Access-Control-Allow-Credentials", "true");filterChain.doFilter(request, response);}
   }
   

2. 代理服務器轉(zhuǎn)發(fā)

通過代理服務器將跨域請求轉(zhuǎn)發(fā)為同源請求，避免跨域問題。

1. 開發(fā)環(huán)境中的前端代理

   • React 配置代理：

     {"proxy": "http://localhost:8080"
     }
     

   • Vue 配置代理：

     module.exports = {devServer: {proxy: {'/api': {target: 'http://localhost:8080',changeOrigin: true,pathRewrite: { '^/api': '' }}}}
     };
     

2. Nginx 反向代理

   server {listen 80;server_name example.com;location /api/ {proxy_pass http://backend-service:8080;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;}
   }
   

3. JSONP（僅支持 GET 請求）

通過 <script> 標簽加載遠程數(shù)據(jù)，并利用回調(diào)函數(shù)實現(xiàn)跨域通信。

• 前端調(diào)用示例：

  <script>function handleResponse(data) {console.log(data);}
  </script>
  <script src="http://example.com/api?callback=handleResponse"></script>
  

• 后端返回數(shù)據(jù)：

  handleResponse({"message": "success"});
  

4. iframe + postMessage

通過嵌入跨域的 iframe，并使用 postMessage 方法實現(xiàn)通信。

• 父頁面代碼：

  const iframe = document.getElementById('myIframe');
  iframe.contentWindow.postMessage('hello', 'http://example.com');window.addEventListener('message', (event) => {if (event.origin === 'http://example.com') {console.log(event.data);}
  });
  

5. 后端設置 JSONP API

在后端返回一個 JavaScript 函數(shù)的調(diào)用來傳遞數(shù)據(jù)，這種方法兼容性較好但僅適用于簡單場景。

---

四、最佳實踐

1. 安全性：

   • 指定可信任的跨域源，不建議使用通配符（*）。
   • 對敏感數(shù)據(jù)接口加強認證和授權控制。

2. 性能優(yōu)化：

   • 使用 Access-Control-Max-Age 緩存預檢請求結果。
   • 減少跨域請求次數(shù)，合并或延遲請求。

3. 復雜場景下的組合解決方案：

   • 開發(fā)階段使用前端代理，生產(chǎn)環(huán)境使用 Nginx 反向代理。
   • 配合 CORS 配置和全局過濾器處理復雜跨域請求。

---

五、總結

跨域問題是瀏覽器同源策略帶來的限制，其根本目的是保護用戶數(shù)據(jù)安全。通過 CORS 配置、全局過濾器、代理服務器等方法，可以靈活解決不同場景下的跨域問題。在實際開發(fā)中，應結合項目需求，選擇最合適的解決方案，同時注重安全性和性能優(yōu)化，從而構建更高效、更安全的 Web 應用。