티스토리 뷰

혼자 집에서 심심풀이로 만드는게 있는데 프론트에서 서버로 보내는 요청이 실패가 되는 현상이 발생했다.

 

크롬 콘솔을 보니 cross 어쩌고 저쩌고..

 

왜그런지 찾아보니 보안상의 이유로 스크랩트 내에서 HTTP요청을 SOP(Same-Origin Policy)로 막는 현상이 있었다.

 

SOP는 두 Origin간에 프로토콜, 포트, 호스트가 같아야 동일 Origin으로 간주하는데

 

예를 들어서 서버가 https://luji.tistory.com/ 주소를 사용중이고 Client에서 보내는 요청이 

1) https://luji.tistory.com/post  일 경우에는 성공

2) http://luji.tistory.com/post  일 경우에는 실패 (프로토콜이 다름 https / http)

3https://luji.tistory.com:8080/post  일 경우에는 실패(포트가 다름)

4https://www.luji.tistory.com/post  일 경우에는 실패(호스트가 다름)

 

이런 경우에 SOP정책에 의해 실패된다

 

그렇담 해결방법은 클라이언트에서 JSONP를 사용하거나 서버에서 CORS를 이용하여 해결 가능하다.

 

Spring Boot에서 CORS를 이용한 방법

1) Controller 개별 지정

@CrossOrigin
@GetMapping("/q")
String getTest(int test) throws Exception {
return testService.test(test);
}

 

2) 전역으로 지정

@Configuration
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer {

@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**");
}
}

 

티스토리에 플러그인을 적용하지 않아서 코드가 더러운데 나는 WebConfig.java를 생성하여 addCorsMappings를 오버라이드하는 방식으로 전역파일로 따로 빼서 addMapping에 경로를 지정해서 사용중이다.