跨域詳解及Spring Boot 3中的跨域解決方案
跨域問題是Web開發中常見的一個問題，尤其在前后端分離的項目中更為常見。本文將為大家介紹跨域的概念、產生原因、影響以及Spring Boot 3中如何解決跨域問題。
跨域的概念
跨域訪問問題指的是在客戶端瀏覽器中，由于安全策略的限制，不允許從一個源（域名、協議、端口）直接訪問另一個源的資源。當瀏覽器發起一個跨域請求時，會被瀏覽器攔截，并阻止數據的傳輸。
這種限制是為了保護用戶的隱私和安全，防止惡意網站利用用戶的瀏覽器向其他網站發送請求并獲取敏感信息。
以下是跨域的一些常見場景：
- 不同域名：當頁面的域名與請求的資源的域名不一致時，會觸發跨域問題。例如，頁面的域名為http://a.com，而請求的資源的域名為http://b.com。
- 不同協議：當請求的資源的協議與頁面的協議不一致時，也會引發跨域問題。例如，頁面使用https://a.com訪問資源http://a.com。
- 不同端口：如果請求的資源的端口與頁面的端口不同，同樣會導致跨域問題。例如，頁面使用http://a.com:8080請求資源http://a.com:8090。
跨域產生的原因
跨域問題的產生是由于瀏覽器的同源策略所導致的。同源策略是瀏覽器的一種安全機制，它防止一個源的文檔或腳本從另一個源的文檔或腳本獲取敏感數據。同源策略要求兩個頁面具有相同的協議、主機和端口號，否則就會產生跨域問題。
跨域的影響
跨域請求會受到瀏覽器同源策略的限制，導致請求被拒絕，難以獲取到需要的數據。這對前后端分離的項目來說是非常不利的，因為客戶端和服務端是兩個不同的服務，客戶端通過瀏覽器向服務端發送請求獲取數據，這就會涉及到跨域問題。如果無法解決跨域問題，就會導致項目無法正常運行。
報錯如下：
_20240520071821.jpg
_20240520071847.jpg
跨域解決方法
為了解決跨域問題，常用的方法包括：
- CORS（Cross-Origin Resource Sharing）：在服務端設置響應頭，允許指定的跨域請求，瀏覽器在收到響應時會根據響應頭判斷是否允許訪問。
- JSONP（JSON with Padding）：通過動態創建<script>標簽來實現跨域請求，服務器返回的數據需要包裹在一個函數調用中。
- 代理服務器：通過在自己的服務器上設置代理，將跨域請求轉發到目標服務器上，再將結果返回給前端。
Spring Boot 3中的跨域解決方案
Spring Boot 3提供了多種方式解決跨域問題，其中比較常用的是配置CorsFilter過濾器。
Spring Boot 提供了 WebMvcConfigurer 接口來幫助我們定制化Web應用的配置，包括CORS（Cross-Origin Resource Sharing）設置。以下是一個簡單的配置類示例：
ResourcesConfig.java
@Configuration
public class ResourcesConfig implements WebMvcConfigurer {
@Bean
public CorsFilter corsFilter()
{
CorsConfiguration config = new CorsConfiguration();
config.setAllowCredentials(true);
// 設置訪問源地址，（*）表示匹配所有。
config.addAllowedOriginPattern("*");
// 設置訪問源請求頭
config.addAllowedHeader("*");
// 設置訪問源請求方法
config.addAllowedMethod("*");
// 有效期 1800秒，設置預檢請求（OPTIONS請求）的緩存時間，1800秒意味著客戶端可以緩存這個設置1800秒
config.setMaxAge(1800L);
// 添加映射路徑，攔截一切請求
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", config);
// 返回新的CorsFilter
return new CorsFilter(source);
}
}以上就是Spring Boot 3中解決跨域問題的方式。通過配置CorsFilter過濾器，我們可以很方便地解決跨域問題，保證項目的正常運行。
Spring Boot 中解決跨域的方案還有很多，這種方式是我們比較常用的一種。
總結
跨域問題是Web開發中一個常見的問題，但是通過Spring Boot 3提供的CorsFilter過濾器，我們可以很容易地解決這個問題。
