CORS 설정하기

CORS의 정의

•  Cross-Origin Resource Sharing의 약어

•  특정 도메인에서 실행되는 웹 애플리케이션이 다른 도메인의 자원에 액세스할 수 있도록 하는 HTTP 기능

•  다른 도메인의 API를 호출할 수 있는 안전한 방법을 제공

•  Origin에서 설정

 

왼쪽처럼 웹사이트에 문서가 뜬다고 했을 때, 그 문서가 도메인 A.com의 모든 정보를 가져오는 건 가능할 것이다.

=> Same-origin requests

 

domain b.com에 있는 콘텐츠를 가져와서 보여주고 있다. b.com에서 a.com의 요청이 들어왔을 때 허용/거부를 설정할 수 있는 게 => Cross-origin reuqests 

 

작동 방법

단순 요청

• CORS 요청이며 시작하기 전에 프리 플라이트 요청(예비 점검)이 필요하지 않음

• www.contoso.com  요청 -> Origin 헤더 값을 Access-Control-Allow-Origin 헤더로 설정
    -> Access-Control-Allow-Origin 헤더와 Origin 헤더 값이 일치하는지 확인

 

프리 플라이트 요청

• CORS 요청을 하기 전에 브라우저가 프리 플라이트 요청을 보내야 하는 CORS 요청

•  www.contoso.com 요청 -> 브라우저가 OPTION으로 메소드 및 헤더 요청

   -> 서버에서 허용된 HTTP 메소드 및 헤더를 지정하여 응답 -> OPTION 메소드 통과 확인 후 Origin 헤더를 포함하여 요청

   -> Access-Control-Allow-Origin 헤더와 Origin 헤더 값이 일치하는지 확인

 

 

Header

Reqeust headers

• Origin

• Access-Conrol-Request-Method

• Access-Control-Request-Headers

 

Response headers

• Access-Control-Allow-Origin

• Access-Control-Allow-Credentials

• Access-Control-Expose-Headers

• Access-Control-Max-Age

• Access-Control-Allow-Methods

• Access-Control-Allow-Headers

 

데모 : Origin에서 CORS 설정

기본적으로 Azure에서 CORS 설정하는 방법은 2가지로 볼 수 있다.

 

첫 번째는 Storage account > CORS

cloudnt.co.kr로 넘어오면 모두 허용을 하고, 메소드는 GET만 받도록 설정한 모습이다.

 

두 번째는 Webapp이다.

cloudnt.co.kr로 넘어오면 허용을 하겠다고 설정한 모습이다.

 

---

Rule Engine 설정

• Verizon Premium만 가능

• Azure CDN에서 HTTP Header를 재정의하여 CORS 구성

• Origin에서 CORS 설정을 무시하고 CDN에 적용 가능

• 별도의 CORS 정책 적용

 

데모 : Ruel Engin 설정 (Verizon Premium)

Manage 로 들어와서 HTTP Large > Rules Engine을 누르면 된다.

 

 

Request header 값의 내용이 Origin일 때, value 값으로 들어오면 밑의 내용을 추가한다는 내용이다.

제공해주는 헤더 값을 수정하고 강제로 덮어씌운다.

이걸 Access-Control-Allow-Origin 값을 설정해서 http_origin에 있는 데이터를 그대로 넣어준 것이다.

=> 사용자가 요청한 헤더 값을 그냥 allow 한다.

 

 

 

 

참고

https://www.inflearn.com/course/azure-cdn-%EA%B2%8C%EC%9E%84%EA%B0%9C%EB%B0%9C#curriculum

[무료] 게임 개발을 위해 알아야 할 Azure CDN - 인프런 | 강의