320x100

스프링 부트로 REST API 서버를 만들면 테스트 다돌려보고 마지막으로 postman에서까지 실행이 잘 되는데 프론트쪽에서 실행할 때 에러가 나는 경우가 있었다
이번에 처음 겪어본 에러였는데 SOP를 따르지 않아서 발생하는 문제였다

CORS(Cross-Origin Resource Sharing)

다른 출처의 자원들을 공유하는 것을 의미한다
따라서 CORS를 설정해주지 않거나 제대로 설정하지 않은 경우 원하는대로 자원을 공유하지 못하게 된다

처음에 다른 출처라는 것에 대해서 이해하는데 정확히 어떤 의미인지 어려운 감이 있었다

우선 다른 출처에 대해서 먼저 알고 넘어가겠다

출처(Origin)

출처는 URL의 Protocol Host Port로 구분된다

Protocol : Http, Https, FTP와 같은 것들을 의미한다
Host : www.naver.com과 같은 우리가 흔히 생각하는 주소이다
Port : http는 80, https는 443으로 정해졌기 때문에 생략이 가능하다

SOP(Same-Origin Policy)

sop란 같은 출처에서만 리소스를 공유할 수 있다라는 규약이다

같은 출처, 다른 출처 구분

같은 출처는 위에서 알아본 URL구성요소가 동일한 것을 같은 출처라고 한다

현재 블로그 주소인 https://whatistudy.tistory.com/를 기준으로 구분을 해보겠다

URL	같은 출처 여부	이유
https://whatistudy.tistory.com/tag	o	모두 동일
https://whatistudy.tistory.com/tag?q=spring	o	모두 동일
http://whatistudy.tistory.com/	x	Protocol 다름
https://hello.tistory.com/	x	Host 다름
https://whatistudy.tistory.com:8000/	x	포트번호 다름

다른 출처일 경우 브라우저는 서버로 부터의 해당 응답값을 무시한다

Access-Controll-Allow-Origin

CORS를 해결하도록 도와주는 헤더이다

서버에서 허용된 출처(Origin)라는 정보를 해당 헤더에 넣어서 보내면 브라우저는 해당 응답값을 무시하지 않고 사용하게 된다

스프링 CORS 해결방법

스프링을 이용하여 해결하는 방법은 2가지가 있다

@CrossOrigin사용

@CrossOrigin
@RestController
@RequiredArgsConstructor
public class MemberController {

    private final MemberService memberService;

    @CrossOrigin(origin="*")
    @PostMapping("/member")
    public ResponseData<String> addMember(@Validated @RequestBody SaveMemberRequest request) {
        return SingleResponseData.of(memberService.saveMember(request));
    }
    @GetMapping("/members")
    public ResponseData<MemberInfoResponse> getMemberList(){
        return ListResponseData.of(memberService.getMembers());
    }
}

WebMvcConfigurer addCorsMappings(CorsRegistry) 메소드 사용

@Configuration(proxyBeanMethods = false)
public class MyCorsConfiguration {

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {

            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                        .allowedOrigins("http://localhost:3000")
                        .allowedMehods("GET", "POST");
            }
        };
    }

}