快捷導(dǎo)航

SpringBoot后端解決跨域問題的3種方案分享

更新時間：2023年07月12日 16:22:51 作者：Leon_coding

這篇文章主要給大家分享介紹了關(guān)于SpringBoot后端解決跨域問題的3種方案,跨域指的是瀏覽器不能執(zhí)行其他網(wǎng)站的腳本,它是由瀏覽器的同源策略造成的,是瀏覽器施加的安全限制,需要的朋友可以參考下

1.跨域的介紹

跨源資源共享（CORS——Cross-Origin Resource Sharing，跨源資源共享，或通俗地譯為跨域資源共享）是一種基于 HTTP 頭的機(jī)制，該機(jī)制通過允許服務(wù)器標(biāo)示除了它自己以外的其它源（域、協(xié)議或端口），使得瀏覽器允許這些源訪問加載自己的資源。跨源資源共享還通過一種機(jī)制來檢查服務(wù)器是否會允許要發(fā)送的真實請求，該機(jī)制通過瀏覽器發(fā)起一個到服務(wù)器托管的跨源資源的“預(yù)檢”請求。在預(yù)檢中，瀏覽器發(fā)送的頭中標(biāo)示有 HTTP 方法和真實請求中會用到的頭。

2.跨域產(chǎn)生原因

跨域問題所產(chǎn)生的原因是瀏覽器的“同源策略”所導(dǎo)致的。什么是同源策略呢，就是瀏覽器規(guī)定了，我當(dāng)前頁面和請求頁面的 1網(wǎng)絡(luò)協(xié)議、2主機(jī)域名、3端口，這三部分必須保證一模一樣才行。如下圖：

這也主要是瀏覽器為了保證用戶上網(wǎng)的基本安全需求而設(shè)置的。

1.為了防止惡意網(wǎng)頁可以獲取其他網(wǎng)站的本地數(shù)據(jù)。

2.為了防止惡意網(wǎng)站iframe其他網(wǎng)站的時候，獲取數(shù)據(jù)。

3.為了防止惡意網(wǎng)站在自已網(wǎng)站有訪問其他網(wǎng)站的權(quán)利，以免通過cookie免登，拿到數(shù)據(jù)。

3.跨域的解決方案

跨域的解決方案有很多種，前后端都有。這里主要介紹下我所知道的三種方案，并配以代碼展示。

1.在后端被訪問代碼的方法上加注解@CrossOrign。這個注解是spring-web中的注解，我們只需在方法上面加注之后，就會解決CORS問題。例如：

/**
     * 獲取用戶信息
     * 
     * @return 用戶信息
     */
    @GetMapping("getInfo")
    @CrossOrigin
    public AjaxResult getInfo()
    {
        SysUser user = SecurityUtils.getLoginUser().getUser();
        // 角色集合
        Set<String> roles = permissionService.getRolePermission(user);
        // 權(quán)限集合
        Set<String> permissions = permissionService.getMenuPermission(user);
        AjaxResult ajax = AjaxResult.success();
        ajax.put("user", user);
        ajax.put("roles", roles);
        ajax.put("permissions", permissions);
        return ajax;
    }

但是，后端有很多被訪問的方法，我們不能在每個方法上面都加上這個注解，代碼冗余。所以就有了第二種方法，我們可以添加一個過濾器，來解決CORS問題，代碼如下：

 
@Configuration
public class CORSFilter {
    @Bean
    public CorsFilter corsFilter(){
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedMethod("*");
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**",corsConfiguration);
        return new CorsFilter(source);
    }
}

還有一種解決方法，我們可以通過實現(xiàn)接口并重寫方法來解決跨域問題，代碼如下：

@Configuration
public class CORSConfiguration implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowedMethods("GET","POST","PUT","HEAD")
                .allowCredentials(true)
                .allowedHeaders("*")
                .maxAge(3600);
    }
}

通過這三種方式，我們就可以解決CORS跨域問題。