Frontend - CORS (교차 출처 리소스 공유)

CORS

 

CORS는 Cross-origin Resource Sharing의 약자로 교차 출처 리소스 공유라는 뜻입니다.

 

조금 더 풀어서 설명하자면 도메인이나 서브도메인, 프로토콜, 포트가 다른 곳 즉, 접속 도메인과 다른 도메인을 가진 사이트에 리소스를 요청하는 일을 말합니다.

 

 

왜 CORS가 필요한가?

 

과거에는 한 사이트의 스크립트에서 다른 사이트에 있는 리소스나 콘텐츠에 접근할 수 없다는 제약이 있었습니다. 이러한 규칙 덕분에 해커가 만든 웹 사이트 hacker.com에서 gmail.com에 있는 데이터에 접근할 수 없어 사람들은 안전하게 인터넷을 사용해왔습니다. 즉, 보안을 위해 만들어진 제약이 동일 출처 정책입니다.

 

처음 네트워크 요청 메서드가 등장했을 때엔 크로스 오리진 요청이 불가능했습니다. 하지만 긴 논의 끝에 서버에서 명시적으로 크로스 오리진 요청을 '허가'했다는 것을 알려주는 특별한 헤더를 전송받았을때만 크로스 오리진 요청이 가능하도록 결정하였습니다.

 

보안을 위해 만들어진 정책이 동일 출처 정책이지만 클라이언트가 도메인이 다른 서버에서 데이터를 가져오는것을 허용하기 위해 CORS가 만들어졌습니다.

 

[ 크로스 오리진 요청 두 가지 ]

 

1. 안전한 요청 (safe request)

 

2. 그 외의 요청 (안전한 요청이 아닌 요청)

 

[ 안전한 요청 ]

 

말 그래도 안전한 요청으로 아래 두 가지 조건을 모두 충족하는 요청입니다.

 

1. 안전한 메서드 (safe method) - GET, POST, HEAD를 사용한 요청

 

2. 안전한 헤더 (safe header) - 아래 목록에 속하는 헤더

 

• Accept
• Accept-Language
• Content-Language
• 값이 application/x-www-form-urlencoded이나 multipart/form-data, text/plain인 Content-Type

 

[ 그 외의 요청 (안전하지 않은 요청) ]

 

두 조건을 만족하지 못하는 요청은 unsafe 요청입니다.

 

 

CORS 에러 해결하기

1. 플러그인을 통한 동일 출처 정책 회피

 

브라우저에 플러그인 설치로 동일 출처 정책 회피 가능.

 

2. jsonp 방식으로 json 데이터 가져오기

 

자바스크립트 파일이나 css 파일은 동일 출처 정책의 영향을 받지 않고 가져올 수 있다.

이를 이용해서 자바스크립트 파일을 가져와서 이를 json 형식으로 파싱해서 데이터를 사용할 수 있다.

 

 

요약

 

CORS란 Cross-Origin Resource Sharing의 약자로 한 도메인에서 자바스크립트로 다른 도메인의 리소스를 요청하는 일

 

보안상의 이유로 자신의 출처(도메인, 프로토콜, 포트)에 속한 리소스만 접근 가능하지만 CORS를 통해 다른 도메인의 리소스에 접근 할 수 있습니다.

 

어떻게 동작하나?

 

a 도메인에서 b 도메인의 리소스에 접근하고 싶다면 b 도메인이 a 도메인에서 보낸 요청에 대한 응답에 CORS 헤더를 포함시켜서 응답을 전달하면 됩니다.

---

 

[ 출처 ]

https://bohyeon-n.github.io/deploy/web/cors.html

https://darkstart.tistory.com/177

https://ko.javascript.info/fetch-crossorigin