クロスドメイン (バックエンド) を解決する SpringBoot プロジェクトの 3 つの方法

クロスドメイン エラー メッセージは次のとおりです。

オリジン 'http://localhost:8080' から 'http://localhost:8181/list' にある XMLHttpRequest へのアクセスが CORS ポリシーによってブロックされました: 要求されたリソースに 'Access-Control-Allow-Origin' ヘッダーが存在しません.

同一オリジン ポリシー

プロトコル、ドメイン名、およびポートはすべて同じです。つまり、同じ送信元を意味します。

Vue (フロントエンド): http://localhost:8080

Spring Boot (バックエンド): http://localhost:8181/list

CORS：Cross Origin Resource Sharing

Spring Boot プロジェクトでドメインを横断する 3 つのソリューション

1. @CrossOrigin アノテーションを対象のメソッドまたはクラスに追加します

@GetMapping("/list")
@CrossOrigin
public List<String> list(){
    List<String> list = Arrays.asList("Java","C++","Go");
    return list;
}

2. CORS フィルターを追加する

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

3. WebMvcConfigurer インターフェイスを実装し、addCorsMappings メソッドを書き直します。

@Configuration
public class CorsConfiguration implements WebMvcConfigurer {

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