CORS

Cross-Origin  Resource Sharing 이란 다른 출처의 자원을 공유할 수 있도록 설정하는 권한 체제입니다.

 

Same Origin 이란

Same Origin이란 Sheme, Host, Port 넘버를 체크하여 이가 일치하는것을 의미합니다.

Same Origin이 아닐경우 정보 접근에 제한을 두는 것을 SOP(Same Origin Policy)라 합니다.

 

현상

Angular 와 Spring boot로 개발하던 도중 아래와 같은 에러가 발생하였습니다.

CORS 에러

이를 해결하는 방법을 살펴보겠습니다.

 

1. Spring에서

 

CORS는 HTTP Header를 통해 요청하는 도메인의 출처를 확인하고 허용하는 방식으로 진행합니다.

이때 설정해야하는 부분은 크게 두부분입니다.

 

1) WebSecurityConfigureAdapter 설정

configure 에 cors() 를 추가해줍니다.

이렇게 추가하게 되면 설정되는 부분은 추후 작성하도록 하겠습니다.

 

2) WebMvcConfigure 설정

addCorsMapping 메소드안에 mapping 해줄 내용을 작성합니다.

 

• addMapping : CORS 를 적용할 URL 패턴을 작성해줍니다.
• allowedOrigins : 자원 공유를 허락할 도메인을 작성해줍니다.
• allowedMethods : 허용할 HTTP method 를 작성해줍니다. 
• maxAge : preflight 를 캐싱해둘 시간을 설정합니다. 여기선 60분으로 설정했습니다.

 

2. Angular 에서

Frontend인 Angular에서 interceptor 를 통해 request 를 가로채 추가 설정을 해주었습니다.

 

 

CORS preflight 이슈

browser 에서 API를 받는 서버가 요청을 받을 수 있는지 options 메소드를 통해 먼저 서버에 호출해 봅니다.

이때 reqeust header에 실어보낸 JWT 를 받지 못하면 위와 같은 CORS 에러를 보게됩니다.