CORS (Cross Origin Resource Sharing)

Cross-Origin Resource Sharing 표준

• AJAX가 널리 사용되면서로 둘러싸여 있는 스크립트에서 생성되는 XMLHttpRequest에 대해서도 Cross-Site HTTP Requests가 가능해야 한다는 요구가 늘어나자 W3C에서 CORS라는 이름의 권고안이 나오게 되었다.

---

CORS 요청의 종류

• CORS 요청은 Simple/Preflight, Credential/Non-Credential의 조합으로 4가지가 존재한다.
• 브라우저가 요청 내용을 분석하여 4가지 방식 중 해당하는 방식으로 서버에 요청을 날리므로, 프로그래머가 목적에 맞는 방식을 선택하고 그 조건에 맞게 코딩해야 한다.

Simple Request

• 아래의 3가지 조건을 모두 만족하면 Simple Request (서버에 1번 요청하고, 서버도 1번 회신하는 것으로 처리가 종료된다.)
  • GET, HEAD, POST중의 한가지 방식을 사용해야 한다.
  • POST 방식일 경우 Content-Type이 아래 셋 중의 하나여야 한다.
    • application/x-www-form-urlencoded
    • multipart/form-data
    • text/plain
  • 커스텀 헤더를 전송하지 말아야 한다.

Preflight Request

• Simple Request 조건에 해당하지 않으면 브라우저는 Preflight Request 방식으로 요청한다. 따라서, Preflight Request는
  • GET, HEAD, POST 외의 다른 방식으로도 요청을 보낼 수 있고,
  • application/xml 처럼 다른 Content-Type으로 요청을 보낼 수도 있으며
  • 커스텀 헤더도 사용할 수 있다.
• Preflight Request는 예비 요청과 본 요청으로 나뉘어 전송된다. 먼저 서버에 예비 요청(Preflight Request)를 보내고 서버는 예비 요청에 대해 응답하고, 그 다음에 본 요청(Actual Request)을 서버에 보내고, 서버도 본 요청에 응답한다.
• 하지만, 예비 요청과 본 요청에 대한 서버단의 응답을 프로그래머가 프로그램 내에서 구분하여 처리하는 것은 아니다. 프로그래머가 Access-Control- 계열의 Response Header만 적절히 정해주면, OPTIONS 요청으로 오는 예비 요청과 GET, POST, HEAD, PUT, DELETE 등으로 오는 본 요청의 처리는 서버가 알아서 처리한다.

Request With Credential

• HTTP Cookie와 HTTP Authentication 정보를 인식할 수 있게 해주는 요청
• 요청시 xhr.withCredentials = true를 지정해서 Credential 요청을 보낼 수 있고, 서버는 Response Header에 반드시 Access-Control-Allow-Credentials: true를 포함해야 하고, Access-Control-Allow-Origin 헤더의 값에는 *가 오면 안되면 구체적인 도메인이 와야한다.

Request Without Credential

• CORS 요청은 기본적으로 Non-Credential 요청이므로, xhr.withCredential = true를 지정하지 않으면 Non-Credential 요청이다.

---

CORS 관련 HTTP Response Headers

• 서버에서 CORS 요청을 처리할 때 지정하는 헤더

Access-Control-Allow-Origin

• Access-Control-Allow-Origin 헤더의 값으로 지정된 도메인으로부터의 요청만 리소스에 접근할 수 있게 한다.
  • Access-Control-Allow-Origin: origin origin에는 요청 도메인의 URI를 지정한다.
  • 모든 도메인으로부터의 서버 리소스 접근을 허용하려면 *를 지정한다.

Access-Control-Expose-Headers

• 기본적으로 브라우저에게 노출이 되지 않지만, 브라우저 측에서 접근할 수 있게 허용해주는 헤더를 지정한다.
• 기본적으로 브라우저에게 노출되는 HTTP Response Header는 아래의 6가지 밖에 없다.
  • Cache-Control
  • Content-Language
  • Content-Type
  • Expires
  • Last-Modified
  • Pragma
• 다음과 같이 Access-Control-Expose-Headers를 Response Header에 지정하여 회신하면 브라우저 측에서 커스텀 헤더를 포함하여, 기본적으로는 접근할 수 없었던 Content-Length 헤더 정보도 알 수 있게 된다.
  • Access-Control-Expose-Headers: Content-Length, X-My-Custom-Header, X-Another-Custom-Header

Access-Control-Max-Age

• Preflight Request의 결과가 캐시에 얼마나 오랫동안 남아있는지를 나타낸다.
  • Access-Control-Max-Age: delta-seconds

Access-Control-Allow-Credentials

• Request With Credential 방식이 사용될 수 있는지를 지정한다.
  • Access-Control-Allow-Credentials: true || false
• 예비 요청에 대한 응답에 Access-Control-Allow-Credentials: false를 포함하면, 본 요청은 Request With Credential을 보낼 수 없다.
• Simple Request에 withCredentials = true가 지정되어 있는데, Response Header에 Access-Control-Allow-Credentials: true가 명시되어 있지 않다면, 그 Response는 브라우저에 의해 무시된다.

Access-Control-Allow-Methods

• 예비 요청에 대한 Response Header에 사용되며, 서버의 리소스에 접근할 수 있는 HTTP Method 방식을 지정한다.
  • Access-Control-Allow-Methods: methods

Access-Control-Allow-Headers

• 예비 요청에 대한 Response Header에 사용되며, 본 요청에서 사용할 수 있는 HTTP Header를 지정한다.
  • Access-Control-Allow-Headers: field-name

---

CORS 관련 HTTP Request Headers

• 클라이언트가 서버에 CORS 요청을 보낼 때 사용하는 헤더로, 브라우저가 자동으로 지정하며, XMLHttpRequest를 사용하는 프로그래머가 직접 지정할 필요 없다.

Origin

• Cross-site 요청을 날리는 요청 도메인 URI를 나타내며, access control이 적용되는 모든 요청에 Origin 헤더는 반드시 포함된다.

Access-Control-Request-Method

• 예비 요청을 보낼 때 포함되어, 본 요청에서 어떤 HTTP Method를 사용할지 서버에게 알려준다.

Access-Control-Request-Headers

• 예비 요청을 보낼 때 포함되어, 본 요청에서 어떤 HTTP Header를 사용할지 서버에게 알려준다.

---