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를 사용할 수 있다
- GET 요청인지 POST 요청인지 파악한다
- Content-Type과 Custom HTTP Header를 파악한다
- OPTIONS 요청을 통해서 서버가 적절한
Access-Control-*
를 가졌는지 확인한다 - 만약 적절한 Access-Control을 가졌다면 실제 XHR을 트리거한다
- 적절하지 못한 Access-Control을 가졌다면 Error를 발생시킨다
2가지 방법이 존재한다
- CORS를 적용하고자 하는 Controller 위에 @CrossOrigin("*")을 사용하는 것
- 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