CORS?
Cross Origin Resource Sharing(CORS)란 무엇일까?
CORS란 Cross Origin Resource Sharing의 약자로 브라우저의 현재 웹페이지가 이 페이지를 받은 서버가 아닌 다른 서버의 자원에 접근할 수 있는 권한을 부여하도록 하는 메커니즘. 하지만 다른 origin에서 내 리소스에 함부로 접근하지 못하게 하기 위해 사용된다
예를 들어보자. 나는 네이버다. 네이버앱에서 # 검색으로 구글에서의 검색 결과를 가져오는 서비스가 있다. 이때, 네이버와 구글은 다른 도메인을 사용하기에 CORS문제가 발생한다.
👩💻 CORS는 왜 필요할까?
만약 내가 서비스하고 있지 않은 사이트에서 세션을 요청해서 세션을 획득할 수 있다면 해당 사이트에서 악의적으로 내 세션을 탈취하거나 다른 행동을 할 수 있다. 그래서 브라우저에서는 이러한 요청을 막는다.
👩💻 CORS는 어떻게 동작하는가?
브라우저가 리소스를 요청할 때 추가적인 헤더에 정보를 담는다. 내 origin은 무엇이고 어떤 메소드를 사용해 요청할 것이고 어떤 헤더들을 포함할 것인지를 담아서 서버에 전송한다.
서버는 서버가 응답할 수 있는 origin들을 헤더에 담아서 브라우저에게 보낸다. 브라우저가 이 헤더를 보고 해당 origin에서 요청할 수 있다면 리소스 전송을 허용하고 만약 불가능하다면 에러를 발생시킨다.
요청 헤더 목록
- origin
- Access-Control-Request-Method
preflight요청을 할 때 실제 요청에서 어떤 메서드를 사용할 것인지 서버에게 알리기 위해 사용된다. - Access-Control-Request-Headers
preflight요청을 할 때 실제 요청에서 어떤 header를 사용할 것인지 서버에게 알리기 위해 사용된다.
간단한 요청이 아닌 경우에는 사전에 추가적으로 요청을 보내야 한다. 이러한 사전 요청을 Preflight request라고 한다. 아래에 있는 경우 preflight request가 필요하다.
- GET,POST,HEAD가 아닌 다른 메소드를 사용하는 요청
- Accept,Accept-Language,Content-Language외 다른 헤더를 포함하는 요청
- Content-type 헤더가 application/x-www-form-urlencoded,multipart/formdata,text/plain 중 하나가 아닌 경우
응답 헤더 목록
Access-Control-Allow-Origin
브라우저가 해당 origin이 자원에 접근할 수 있도록 허용한다.혹은 *은 credentials이 없는 요청에 한해서 모든 origin에서 접근이 가능하도록 허용한다.Access-Control-Expose-Headers
브라우저가 액세스할 수 있는 서버 화이트리스트 헤더를 허용한다.Access-Control-Max-Age
얼마나 오랫동안 preflight요청이 캐싱될 수 있는지를 나타낸다. 응답을 캐싱해두면 매번 Preflight request를 보낼 필요가 없다.Access-Control-Allow-Credentials
-credentials가 true일 때 요청에 대한 응답이 노출될 수 있는지 나타낸다.
-preflight요청에 대한 응답의 일부로 사용되는 경우 실제 자격 증명을 사용하여 실제 요청을 수행할 수 있는 지 나타낸다.
-간단한 GET요청은 preflight되지 않으므로 자격증명이 있는 리소스를 요청하면 헤더가 리소스와 함께 반환되 지 않으면 브라우저에서 응답을 무시하고 웹 콘텐츠로 반환하지 않는다.Access-Control-Allow-Methods
preflight요청에 대한 응답으로 허용되는 메서드를 나타낸다.Access-Control-Allow-Headers
preflight요청에 대한 응답으로 실제 요청시 사용할 수 있는 HTTP헤더를 나타낸다
참고:https://hannut91.github.io/blogs/infra/cors,
https://velog.io/@shroad1802/CORS
