[네트워크] CORS란?

CORS

• CORS란 Cross Origin Resoucre Sharing으로 Origin(출처)를 교차하여 자원을 공유한다는 뜻이다. 즉 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다.
• 일반적으로 자바스크립트에서는 Same origin policy (동일출처정책) 보안정책을 가지고 잇어 다른 origin에 접근시 No Access-Control-Allow-Origin Header라는 오류를 노출하게 되어 있다.

출처 : 모질라 

 

CORS의 배경

• 처음 전송되는 리소스의 도메인과 다른 도메인으로부터 리소스가 요청될 경우 해당 리소스는 cross-origin HTTP요청에 의해 요청된다.
• XMLHttpRequest는 same-origin 정책을 따르기에 XMLHttpRequest을 사용하는 웹 애플리케이션은 자신과 동일한 도메인으로 HTTP 요청을 보내는 것만 가능했다.
• 웹 애플리케이션을 개선시키기 위해 개발자들은 브라우저 벤더사들에게 XHR이 cross-domain요청을 할 수 있도록 요청했고 이에 따라 CORS가 생겼다.

 

CORS 동작과정

• CORS요청시 미리 OPTIONS 메소드로 preflight를 보내 서버가 CORS를 허용하는지 물어본다. ( 브라우저는 현재 웹페이지 이외의 도메인에 xhr요청시 CORS preflight요청을 보낸다.)
• 이때 Access-Control-Request-Method로 실제 보내고자하는 메서드를 알리고,
• Access-Control-Request-Headers로 실제 보내고자 하는 헤더들을 알린다.
• Allow항목들은 Request에 대응되는 것으로, 서버가 허용하는 메서드와 헤더를 응답하는데 사용된다.
• Request와 Allow가 일치하면 CORS요청이 이루어진다.

요청헤더의 Origin 헤더를 보면 어떤 도메인으로부터 요청이 왔는지 알수있다.

이에 대한 응답으로 서버는 Access-Control-Allow-Origin헤더를 다시 전송한다.

 

CORS 관련 응답헤더

이 헤더들이 cors preflight요청(OPTION메소드)에 대한 서버측 응답에 포함되어 있어야 브라우저가 이를 보고 cors를 허용하고 실제 요청이 전송된다.

• Access-Contorl-Allow-Origin
  • CORS 요청을 허용할 사이트 (e.g. https://oddpoet.net로부터 오는건 받겠다.)
• Access-Contorl-Allow-Method
  • CORS 요청을 허용할 Http Method들 (e.g. GET,PUT,POST)
• Access-Contorl-Allow-Headers
  • 특정 헤더를 가진 경우에만 CORS 요청을 허용할 경우
• Access-Contorl-Allow-Credencial
  • 자격증명과 함께 요청을 할 수 있는지 여부.
  • 해당 서버에서 Authorization로 사용자 인증도 서비스할 것이라면 true로 응답해야 할 것이다.
• Access-Contorl-Max-Age
  • preflight 요청의 캐시 시간.

 

CORS를 문제를 해결하기 위한 방법

1. 동일한 도메인서버에서 자원을 요청한다. 하라는대로 하는것
2. 서버에서 origin을 설정해준다. 서버에서 요청받을때 해당 client의 origin에 대해 허가해주는 정책을 추가함

 

 

 

출처 :

https://developer.mozilla.org/ko/docs/Web/HTTP/CORShttps://github.com/WeareSoft/tech-interview/blob/master/contents/network.md#cors%EB%9E%80