跨域問題是Web開發(fā)中常見的一個(gè)問題，尤其在前后端分離的項(xiàng)目中更為常見。本文將為大家介紹跨域的概念、產(chǎn)生原因、影響以及Spring Boot 3中如何解決跨域問題。

跨域的概念

跨域訪問問題指的是在客戶端瀏覽器中，由于安全策略的限制，不允許從一個(gè)源（域名、協(xié)議、端口）直接訪問另一個(gè)源的資源。當(dāng)瀏覽器發(fā)起一個(gè)跨域請(qǐng)求時(shí)，會(huì)被瀏覽器攔截，并阻止數(shù)據(jù)的傳輸。

這種限制是為了保護(hù)用戶的隱私和安全，防止惡意網(wǎng)站利用用戶的瀏覽器向其他網(wǎng)站發(fā)送請(qǐng)求并獲取敏感信息。

以下是跨域的一些常見場(chǎng)景：

• 不同域名：當(dāng)頁面的域名與請(qǐng)求的資源的域名不一致時(shí)，會(huì)觸發(fā)跨域問題。例如，頁面的域名為http://a.com，而請(qǐng)求的資源的域名為http://b.com。
• 不同協(xié)議：當(dāng)請(qǐng)求的資源的協(xié)議與頁面的協(xié)議不一致時(shí)，也會(huì)引發(fā)跨域問題。例如，頁面使用https://a.com訪問資源http://a.com。
• 不同端口：如果請(qǐng)求的資源的端口與頁面的端口不同，同樣會(huì)導(dǎo)致跨域問題。例如，頁面使用http://a.com:8080請(qǐng)求資源http://a.com:8090。

跨域產(chǎn)生的原因

跨域問題的產(chǎn)生是由于瀏覽器的同源策略所導(dǎo)致的。同源策略是瀏覽器的一種安全機(jī)制，它防止一個(gè)源的文檔或腳本從另一個(gè)源的文檔或腳本獲取敏感數(shù)據(jù)。同源策略要求兩個(gè)頁面具有相同的協(xié)議、主機(jī)和端口號(hào)，否則就會(huì)產(chǎn)生跨域問題。

跨域的影響

跨域請(qǐng)求會(huì)受到瀏覽器同源策略的限制，導(dǎo)致請(qǐng)求被拒絕，難以獲取到需要的數(shù)據(jù)。這對(duì)前后端分離的項(xiàng)目來說是非常不利的，因?yàn)榭蛻舳撕头?wù)端是兩個(gè)不同的服務(wù)，客戶端通過瀏覽器向服務(wù)端發(fā)送請(qǐng)求獲取數(shù)據(jù)，這就會(huì)涉及到跨域問題。如果無法解決跨域問題，就會(huì)導(dǎo)致項(xiàng)目無法正常運(yùn)行。

報(bào)錯(cuò)如下：

_20240520071821.jpg_20240520071847.jpg

跨域解決方法

為了解決跨域問題，常用的方法包括：

• CORS（Cross-Origin Resource Sharing）：在服務(wù)端設(shè)置響應(yīng)頭，允許指定的跨域請(qǐng)求，瀏覽器在收到響應(yīng)時(shí)會(huì)根據(jù)響應(yīng)頭判斷是否允許訪問。
• JSONP（JSON with Padding）：通過動(dòng)態(tài)創(chuàng)建<script>標(biāo)簽來實(shí)現(xiàn)跨域請(qǐng)求，服務(wù)器返回的數(shù)據(jù)需要包裹在一個(gè)函數(shù)調(diào)用中。
• 代理服務(wù)器：通過在自己的服務(wù)器上設(shè)置代理，將跨域請(qǐng)求轉(zhuǎn)發(fā)到目標(biāo)服務(wù)器上，再將結(jié)果返回給前端。

Spring Boot 3中的跨域解決方案

Spring Boot 3提供了多種方式解決跨域問題，其中比較常用的是配置CorsFilter過濾器。

Spring Boot 提供了 WebMvcConfigurer 接口來幫助我們定制化Web應(yīng)用的配置，包括CORS（Cross-Origin Resource Sharing）設(shè)置。以下是一個(gè)簡(jiǎn)單的配置類示例：

ResourcesConfig.java

@Configuration
public class ResourcesConfig implements WebMvcConfigurer {

    @Bean
    public CorsFilter corsFilter()
    {
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        // 設(shè)置訪問源地址，（*）表示匹配所有。
        config.addAllowedOriginPattern("*");
        // 設(shè)置訪問源請(qǐng)求頭
        config.addAllowedHeader("*");
        // 設(shè)置訪問源請(qǐng)求方法
        config.addAllowedMethod("*");
        // 有效期 1800秒，設(shè)置預(yù)檢請(qǐng)求（OPTIONS請(qǐng)求）的緩存時(shí)間，1800秒意味著客戶端可以緩存這個(gè)設(shè)置1800秒
        config.setMaxAge(1800L);
        // 添加映射路徑，攔截一切請(qǐng)求
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
        // 返回新的CorsFilter
        return new CorsFilter(source);
    }
}

以上就是Spring Boot 3中解決跨域問題的方式。通過配置CorsFilter過濾器，我們可以很方便地解決跨域問題，保證項(xiàng)目的正常運(yùn)行。

Spring Boot 中解決跨域的方案還有很多，這種方式是我們比較常用的一種。

總結(jié)

跨域問題是Web開發(fā)中一個(gè)常見的問題，但是通過Spring Boot 3提供的CorsFilter過濾器，我們可以很容易地解決這個(gè)問題。