본문 바로가기

항해 시절

CORS란 무엇인가 (항해 5주차 회고록)

728x90
728x90

5주차는 주특기 심화주 주차로 스프링에서는 음식점 및 음식 등록과 주문하기 등에 API 작성 등을 구현하면서 CRUD에 관한 기본 적인 API 연습을 하였다.

마지막 주특기 교육 주차였는데 주특기 교육 3주동안 배운 것이 많이 있었지만, 아직 완전히 내 것으로 만들기에는 부족한 시간이여서 앞으로도 꾸준히 복습을 해야할 것 같고 아직 배우지 못한 것들도 무수히 많다고 생각한다.

프론트엔드와의 협업에 앞서 CORS에 대해 공부해보았다.

(Cross-Origin Resource Sharing,) CORS 란 다른 출처의 자원을 공유할 수 있도록 설정하는 권한 체제를 말합니다.

따라서 CORS를 설정해주지 않거나 제대로 설정하지 않은 경우, 원하는대로 리소스를 공유하지 못하게 됩니다.

CORS Global하게 적용하는 방법

@Configuration

public class WebConfig implements WebMvcConfigurer {

@Override

public void addCorsMappings(CorsRegistry registry) {

registry.addMapping("/**")

.allowedOrigins("http://localhost:8080", "http://localhost:8081");

.allowedMethods("GET", "POST")

.allowedHeaders("*")

.exposedHeaders(HttpHeaders.AUTHORIZATION)

.allowCredentials(true);

}

}

우선 진행 중인 Project 패키지 안에 confing 패키지를 생성하여

해당 패키지안에 WebConfig 자바 파일을 생성 한 뒤 위와 같이 작성을 해주면 된다.

코드를 살펴보면

1. @Configuration 을 통해 설정파일임을 알려준다.

2. WebMvcConfigurer 을 implements 해준다

3. registry.addMapping("/**") 으로 url 패턴 설정

4. allowedOrigins("http://localhost:8080", "http://localhost:8081") 외부 도메인 접근을 허용할 주소 설정

5. allowedMethods("GET", "POST") 허용할 HTTP method 를 설정

6. allwoedHeaders("*") 어떤 헤더들을 요청할 것인지 설정

7. exposeHeaders(HttpHeaders.AUTHORIZATION) 헤더에 토큰이 사용하기 위해선 명시해줘야함

8.allowCredentials(true) 쿠키 요청을 허용할지 설정

그 외에

.maxAge(1500) preflight 요청에 대한 응답을 브라우저에서 캐싱하는 시간 등이 있다.