Spring boot 入門教程-CORS 跨域支持

CORS（Cross-Origin Resource Sharing）”跨域資源共享”，是一個W3C標準，它允許瀏覽器向跨域服務器發送Ajax請求，打破了Ajax只能訪問本站內的資源限制。我們在開發中都會遇到前端請求後臺服務器出現跨域錯誤，下面就講一下如何讓SpringBoot項目支持CORS跨域。

第一步 搭建SpringBoot項目，Spring 4.2提供了@CrossOrigion註解實現CORS的支持。

怎麼搭建一個SpringBoot項目及添加相關依賴，我在這裏就不細說了，相信對各位來說都是小菜。

第二步 配置CORSConfiguration，全局跨域設置。

新建一個類CORSConfiguration，繼承WebMvcConfigurerAdapter，並重寫addCorsMappings方法。

@Configuration
public class CORSConfiguration extends WebMvcConfigurerAdapter{
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedMethods("*")
                .allowedOrigins("*")
                .allowedHeaders("*");
        super.addCorsMappings(registry);
    }
}

配置的詳細信息說明如下： 
addMapping：配置可以被跨域的路徑，可以任意配置，可以具體到直接請求路徑。 
allowedMethods：允許所有的請求方法訪問該跨域資源服務器，如：POST、GET、PUT、DELETE等。 
allowedOrigins：允許所有的請求域名訪問我們的跨域資源，可以固定單條或者多條內容，如：”http://www.aaa.com“，只有該域名可以訪問我們的跨域資源。 
allowedHeaders：允許所有的請求header訪問，可以自定義設置任意請求頭信息。

舉例：

1.允許域名訪問

@Configuration
public class CorsConfig {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/api/**")
                        .allowedOrigins("http://localhost:63342");//允許域名訪問，如果*，代表所有域名
            }
        };
    }
}

2.只允許header中帶Authorization或者Token的請求訪問

@Configuration
public class CorsConfig {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/api/**")
                        .allowedHeaders("Authorization", "Token")//允許的頭信息
                        .allowedOrigins("http://localhost:63342");
            }
        };
    }
}

3.只支持post方式訪問

@Configuration
public class CorsConfig {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/api/**")
                        .allowedHeaders("Authorization", "Token")
                        .allowedMethods("POST")//只允許post方式
                        .allowedOrigins("http://localhost:63342");
            }
        };
    }
}

局部跨域設置

上面是配置了全局的跨域訪問，也可以配置局部訪問控制

類上面註解@CrossOrigin

@CrossOrigin(origins = "http://domain.com", allowedHeaders = "token", methods = {RequestMethod.GET, RequestMethod.POST})
@RestController
public class TestResource{

}

方法上面的@CrossOrigin

@RestController
public class TestResource{
    @CrossOrigin(origins = "http://domain.com", allowedHeaders = {"header1", "header2"})
    @GetMapping("/api/test")
    public String test(){
        return "test";
    }
}