CORS - xx10222/selab-todo-list GitHub Wiki

같은 Origin(주소)에만 요청을 보낼 수 있게 제한하는 보안 정책
Origin은 다음과 같은 구성으로 이뤄진다

• URI Schema (ex. HTTP, HTTPS)
• Hostname (ex. localhost, naver.com)
• Port (ex. 80, 8080)

이 중에 하나라도 구성이 다르면 SOP 정책에 걸리기 때문에 ajax 요청을 보낼 수 없다

다음은 http://www.example.com/dir/page.html 에 요청을 보낼 때 예시이다

CORS는 서로 다른 Origin끼리 요청을 주고 받을 수 있게 정해둔 표준이다 백엔드와 프론트엔드의 Origin이 다른 경우 사용해야 한다 Spring에서는 @CrossOrigin 이라는 어노테이션을 지원해주기 때문에, 이 어노테이션을 사용하면 간단하게 CORS를 사용할 수 있다

1. GET 요청인지 POST 요청인지 파악한다
2. Content-Type과 Custom HTTP Header를 파악한다
3. OPTIONS 요청을 통해서 서버가 적절한 Access-Control-* 를 가졌는지 확인한다
4. 만약 적절한 Access-Control을 가졌다면 실제 XHR을 트리거한다
5. 적절하지 못한 Access-Control을 가졌다면 Error를 발생시킨다

2가지 방법이 존재한다

1. CORS를 적용하고자 하는 Controller 위에 @CrossOrigin("*")을 사용하는 것
2. WebMvcConfigure 인터페이스를 상속받아서 CORS를 적용하는 것

1번의 경우, 특정 컨트롤러의 url에만 적용이 되는데 이는 Controller가 많아질수록 어노테이션이 많아진다는 단점이 있다

따라서 나는 2번 방법을 통해 설정하였다

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // CORS를 적용할 URL 패턴 정의
                .allowedOrigins("*") // 자원 공유를 허락할 Origin 지정
                .allowedMethods("GET", "POST", "PATCH", "DELETE") // 허용할 HTTP 메서드 지정
                .maxAge(3000); // pre-flight request 지정
    }
}

참고)
https://shinsunyoung.tistory.com/86 https://dev-pengun.tistory.com/entry/Spring-Boot-CORS-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0