http://localhost:8080
: Spring Boothttp://localhost:3000
: ReactUdemy
강의를 수강 중에 Cors 에러가 발생하였다. 예제 코드는 Spring Security가 적용되지 않았지만 필자는 이전에 Security 적용을 한 코드로 진행하고 싶어 코딩을 하다가 결국 막히고 말았다...
JSESSSIONID
와 같은 쿠키를 포함하고 있지 않고, 이는 Request가 인증되지 않은 사용자라고 판단되어 302에러를 보낸다.CORS는 영어 그래로 교차 출처를 공유할 수 있는 권한을 부여하도록 브라우저에 알려주는 정책이다. 서로 다른 출처를 가진 Application이 서로의 Resource에 접근할 수 있도록 해준다.
URL의 요소중 Protocol
, Host
, Port
를 합친 용어
동일한 출처에 대한 정책을 의미한다.
동일한 출처에만 리소스를 공유할 수 있다.`라는 법률을 가진고 있다.
Cors와 반대 의미로 생각하면 쉽다.
즉, 서버에서 Access-Control-Allow-Origin 헤더를 설정해 CORS에러를 해결해야한다.
여러 시나리오가 있지만 Preflight Request(예비 요청)
를 알아야한다.
자세한 시나리오는 아래 링크를 읽어보자
CORS 처리는 반드시 Spring Security
에 앞서 처리되어야 한다. Preflight Request는 JSESSSIONID
와 같은 쿠키를 포함하고 있지 않고, 이는 Request가 인증되지 않은 사용자라고 판단되어 302에러를 보낸다.
이를 해결하기 위해 CorsConfigurationSource
를 Spring Security
에 적용할 수 있다.
//CORS 설정
@Bean
public CorsConfigurationSource corsConfigurationSource() {
CorsConfiguration config = new CorsConfiguration();
config.setAllowCredentials(true);
config.setAllowedOrigins(Arrays.asList("http://localhost:3000"));
config.setAllowedMethods(Arrays.asList("HEAD","POST","GET","DELETE","PUT"));
config.setAllowedHeaders(Arrays.asList("*"));
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", config);
return source;
}
//CORS 설정 적용
@Override
protected void configure(HttpSecurity http) throws Exception{
http
.httpBasic().disable()
.cors().configurationSource(corsConfigurationSource())
.and()
.authorizeRequests(
auth -> auth.anyRequest().authenticated()
);
http.formLogin(withDefaults());
http.csrf().disable();
http.headers().frameOptions().disable();
}
이때 반드시 Authentication Filter
보다 앞에 CorsFilter
를 추가해주어야 한다.
Spring MVC
에서 CORS를 적용하는 방법은 크게 2가지가 있다.
@CrossOrigin
어노테이션을 사용해서 설정하는 방법Spring MVC
설정에서 CORS
를 설정하는 방법//@CrossOrigin(origins = "http://localhost:3000")
@RestController
public class HelloWorldController {
@GetMapping(path = "/hello-world")
//@CrossOrigin(origins = "http://localhost:3000", methods = RequestMethod.GET) //특정 url에 cors에러 해결법
public String helloWorld() {
return "Hello World";
}
}
http://localhost:3000
URL 허용(클래스 단위, 메서드 단위 둘다 가능)@SpringBootApplication
public class MywebappApplication {
public static void main(String[] args) {
SpringApplication.run(MywebappApplication.class, args);
}
// @Bean
// public WebMvcConfigurer corsConfigurer() {//전역적으로 cors에러 해결법 Spring mvc에서 사용
// return new WebMvcConfigurer() {
// public void addCorsMappings(CorsRegistry registry) {
// registry.addMapping("/**")
// .allowedMethods("*")
// .allowedOrigins("http://localhost:3000");
// }
// };
// }
}
만약 Spring MVC의 CORS 지원을 사용한다면, Spring Security의 CorsConfigurationSource 설정을 생략할 수 있다. Spring Security는 Spring MVC에서 제공되어지는 CORS 설정을 자동으로 탐지하여 활용할 것이다.