一、什么是跨域

跨域是指一個(gè)域下的文檔或腳本試圖去請(qǐng)求另一個(gè)域下的資源,或者涉及到兩個(gè)不同域名的資源之間的交互。由于同源策略(Same Origin Policy)的限制,瀏覽器不允許跨域請(qǐng)求。同源策略規(guī)定,A網(wǎng)頁設(shè)置的Cookie、LocalStorage和IndexDB無法被同源以外的網(wǎng)頁讀取?？缬蛘?qǐng)求會(huì)被瀏覽器拒絕。舉個(gè)例子:- DOMAIN-A.com 和 DOMAIN-B.com 是兩個(gè)不同的域名,它們之間的請(qǐng)求就是跨域請(qǐng)求。- DOMAIN-A.com/dir1 和 DOMAIN-A.com/dir2 雖然路徑不同,但是域名相同,所以不是跨域。

二、跨域問題出現(xiàn)的原因

1. 瀏覽器的同源策略(Same Origin Policy)限制了跨域請(qǐng)求。主要出于安全考慮,瀏覽器限制腳本只能讀取與之同源的資源。同源指的是協(xié)議、域名、端口都相同。跨域請(qǐng)求會(huì)因?yàn)檫`反同源策略而被阻止。
2. Cookie和本地存儲(chǔ)也遵循同源策略。A域名下的頁面無法讀取B域名下的Cookie、localStorage等。
3. 跨域JavaScript請(qǐng)求會(huì)報(bào)錯(cuò)。比如A頁面請(qǐng)求B頁面的JS文件,就會(huì)報(bào)錯(cuò)。
4. 跨域DOM無法訪問。A頁面的JS無法獲取B頁面的DOM節(jié)點(diǎn)。
5. 跨域數(shù)據(jù)請(qǐng)求需要進(jìn)行CORS預(yù)檢。瀏覽器會(huì)在正式通信之前,先進(jìn)行一次HTTP查詢請(qǐng)求,詢問服務(wù)器是否允許跨源請(qǐng)求。
6. iframe也受同源策略限制。A頁面的iframe嵌入B頁面,A頁面JS無法訪問iframe的DOM。
7. 跨域圖片獲取限制。A頁面無法獲取B頁面img標(biāo)簽的src,會(huì)報(bào)錯(cuò)。

三、常見的跨域請(qǐng)求方式

1. JSONP:通過script標(biāo)簽加載JS文件來實(shí)現(xiàn)跨域通信。
2. CORS:服務(wù)器端設(shè)置HTTP頭,允許指定的請(qǐng)求來源跨域訪問。
3. postMessage:A域的window向B域的window發(fā)送消息,實(shí)現(xiàn)跨域通信。

四、SpringBoot實(shí)現(xiàn)跨域的幾種方式

1.@crossOrigin 注解我們可以在Controller的方法上直接使用@CrossOrigin注解,如:

@CrossOrigin(origins = "http://domain1.com")
@RestController
public class TestController {
    @GetMapping("/test")
    public String test() {
        return "hello";
    }
}

這種方式簡(jiǎn)單適用,但是不能應(yīng)對(duì)所有的跨域請(qǐng)求,比較局限。

2.過濾器CorsFilter我們可以注冊(cè)CorsFilter跨域過濾器,如:

@Configuration
public class CorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        config.addAllowedOrigin("http://domain1.com");
        config.addAllowedHeader("*");
        config.addAllowedMethod("*");
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}

然后該過濾器會(huì)應(yīng)用到所有的請(qǐng)求上。這種方式配置更加靈活。

3.配置類WebMvcConfigurer我們可以在WebMvcConfigurer接口的addCorsMappings()方法中添加跨域配置,如:

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
            .allowedOrigins("http://domain1.com")
            .allowedMethods("GET", "POST", "PUT", "OPTIONS", "DELETE", "PATCH")
            .allowedHeaders("*")
            .allowCredentials(true);
    }
}

這也是一種比較常用的跨域解決方案。

到此這篇關(guān)于SpringBoot實(shí)現(xiàn)跨域的幾種常用方式總結(jié)的文章就介紹到這了,更多相關(guān)SpringBoot實(shí)現(xiàn)跨域內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論