CORS
Cross-Origin Resource Sharing
교차 출처 리소스 공유
한 출처에서 실행중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제
브라우저가 클라이언트 사용자를 보호하기 위한 방법
SOP
Same-Origin Policy
동일 출처 정책으로 동일한 출처끼리만 데이터 접근을 허용, 다른 출처는 차단
브라우저에서 크로스 도메인 요청은 기본적으로는 제한되어 있음
→그러나 웹 생태계가 다양해지면서 다른 출처 자원에 접근할 일이 많아졌고 합법적으로 허용하기 위해 CORS 방식이 나옴. 현재는 서버가 allow 한 범위 내에서 cross origin 요청가능
처음 전송되는 리소스의 도메인과 다른 도메인으로부터의 리소스가 요청되는 경우 해당 리소스는 cross-origin HTTP 요청에 의해 요청한다.
Header에 origin을 추가. 이 origin에는 요청하는 쪽의 scheme, domain, port가 담긴다.
사용자 식별 정보가 담긴 요청에 대해서는 더욱 엄격함
요청을 보내는 쪽에서는 요청에 credentials 항목을 true로 세팅
응답을 보낼 때도 요청한 출처 - 웹페이지 주소를 정확히 명시한 후 access-control-allow-credentials 항목을 true로 맞춰주어야함
XMLHttpRequest Fetch API
const defaultCorsHeaders = {
// 모든 도메인(*) 허용
'access-control-allow-origin': '*',
// 허용하는 메소드
'access-control-allow-methods': 'GET, POST, PUT, DELETE, OPTIONS',
// 헤더에 쓸 수 있는 것
'access-control-allow-headers': 'content-type, accept',
// preflight request 허용시간 (seconds)
'access-control-max-age': 10
}
JavaScript
복사
simple requests
아래 조건을 모두 만족해야함
•
GET HEAD POST 중 하나의 요청이어야 한다.
•
유저 에이전트가 자동으로 설정한 헤더
•
content-Type이 허용하는 값 : application/x-www-form-urlencoded multipart/form-data text/plain
preflighted request
본 요청을 보내기 전, 먼저 OPTION 메서드를 통해 다른 도메인의 리소스로 요청을 보내 실제 요청을 전송하기에 안전한지 확인
OPTIONS → 서버에서 allow하는 조건들을 다 맞추고 있는가?
PUT DELETE
다른 origin(domain, protocol, port)간의 리소스 공유
In express
미들웨어를 사용해 cors를 설정
JavaScript
복사