2つのCORS対策法
フロントエンド-バックエンド方式のローカル開発では必ず発生するのがCORSエラーです。
API側(SpringBoot側)で、CORSアクセス(異なるドメインやポートからのリクエスト)を許可する設定をする必要があります。
公式サイトにも説明がありますが、プロジェクト作成から始まってるため長いです。
https://spring.pleiades.io/guides/gs/rest-service-cors/
結論として、CORS許可方法は 2つあります。
- Controllerのクラスまたはメソッドごとに許可する方法
- アプリケーション全体で許可する方法
ここでは、ローカル開発時を想定しているため、後者の方法をお伝えします。
アプリケーション全体で許可する方法
下記のクラスを、@SpringBootApplicationのついたクラスのパッケージ配下に作成してください。
config.setAllowedOriginsの部分で、CORSアクセスを許可するドメインやポートを指定します。
package com.springhack.happylibrary.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
import java.util.ArrayList;
import java.util.Arrays;
@Configuration
public class CorsConfig {
@Bean
public CorsFilter corsFilter() {
CorsConfiguration config = new CorsConfiguration();
config.setAllowedOrigins(Arrays.asList("http://localhost:8081"));
config.setAllowCredentials(true);
config.addAllowedMethod("*");
config.addAllowedHeader("*");
config.addExposedHeader("Set-Cookie");
UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
configSource.registerCorsConfiguration("/**", config);
return new CorsFilter(configSource);
}
}
CorsConfigurationクラスの説明はこちらです。
アクセス許可するオリジンの指定方法
アクセス許可するオリジン(リクエスト元)を指定しているのが、上記の
config.setAllowedOrigins(new ArrayList<>(Arrays.asList("http://localhost:8081")));
この部分です。
SetAllowedOrigins以外にも、URLパターンを指定することができます。
メソッド名 | 説明 |
setAllowedOrigin(String origin) | 1つのオリジンを許可する。 |
setAllowedOrigins(List<String> origins) | 複数のオリジンを許可する。 |
setAllowedOriginPatterns(List<String> allowedOriginPatterns) | パターンに一致するオリジンを許可する。 |
ローカルホストの任意のポートからのアクセスを許可したい場合はこのようになります。
config. setAllowedOriginPatterns(Arrays.asList("http://localhost:[*]"));
Controllerのクラスまたはメソッドごとに許可する方法
こちらは簡単で、@RestControllerをつけたクラス、または@GetMappingなどをつけたメソッドに、@CrossOriginアノテーションをつけるだけです。
@CrossOriginのパラメータとして、アクセス許可元などを指定できます。s