Cross-Origin Resource Sharing(CORS)은 웹 서버와 브라우저 간의 안전한 통신을 가능하게 하는 중요한 메커니즘이다. CORS는 웹 애플리케이션이 다른 도메인에서 리소스를 요청할 수 있는 방법을 제공함으로써, 웹 애플리케이션이 애플리케이션을 제공하는 도메인과 다른 도메인의 데이터에 접근하는 것을 제한하는 Same-Origin Policy(SOP)의 한계를 극복하도록 돕는다.

이 블로그 글에서는 CORS의 중요성, 작동 방식, 그리고 다양한 시나리오에서 Nginx에 CORS를 구성하는 방법을 살펴본다. 또한 allow-origin, allow-methods, allow-headers, expose-headers와 같은 주요 CORS 개념도 깊이 파헤친다.

CORS의 중요성

CORS는 서로 다른 도메인의 서버와 클라이언트 간 통신을 가능하게 하므로 현대 웹 애플리케이션에 필수적이다. 이를 통해 애플리케이션은 사용자 데이터의 무결성을 유지하면서 다양한 도메인에서 호스팅되는 데이터와 서비스에 안전하게 접근할 수 있다.

Nginx에서 CORS 구성하기

Nginx는 CORS를 지원하도록 쉽게 구성할 수 있는 인기 있는 웹 서버다. 이 섹션에서는 Nginx 서버에서 CORS를 활성화하는 두 가지 다른 구성 예제를 제공한다. 첫 번째 구성은 단일 도메인용이며, 두 번째는 여러 도메인과 서브도메인을 다룬다.

구성 예제 1: 단일 도메인 (domain.com)

단일 도메인에 CORS를 활성화하려면 Nginx 구성 파일의 server 블록에 다음을 추가한다:

location / {
    add_header 'Access-Control-Allow-Origin' 'https://domain.com';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';
    add_header 'Access-Control-Expose-Headers' 'Content-Length';
}

구성 예제 2: 여러 도메인 및 서브도메인 (domain.com, domain1.com, domain2.com, domain3.com 및 서브도메인)

여러 도메인과 서브도메인에 CORS를 활성화하려면 Nginx server 블록에서 다음 구성을 사용한다:

location / {
    if ($http_origin ~* (https?://(?:.+\.)?(domain\.com|domain1\.com|domain2\.com|domain3\.com)$)) {
        add_header 'Access-Control-Allow-Origin' '$http_origin';
    }
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';
    add_header 'Access-Control-Expose-Headers' 'Content-Length';
}

CORS 개념

  1. Access-Control-Allow-Origin: 이 헤더는 어떤 오리진이 서버의 리소스에 접근할 수 있는지 지정한다. 예제에서는 단일 도메인을 설정하거나 정규 표현식을 사용하여 여러 도메인과 서브도메인을 매칭한다.
  2. Access-Control-Allow-Methods: 이 헤더는 클라이언트가 서버에 요청할 때 사용할 수 있는 허용된 HTTP 메서드(예: GET, POST, OPTIONS)를 정의한다.
  3. Access-Control-Allow-Headers: 이 헤더는 클라이언트가 요청에 포함할 수 있는 허용된 HTTP 헤더를 나열한다. 일반적인 헤더로는 "Content-Type"과 "Authorization"이 있다.
  4. Access-Control-Expose-Headers: 이 헤더는 서버가 클라이언트에 노출하는 헤더를 지정한다. 예제에서는 "Content-Length" 헤더를 노출한다.

결론

CORS는 현대 웹 애플리케이션에 있어 필수적인 보안 메커니즘이다. Nginx에서 CORS를 이해하고 구현함으로써 웹 애플리케이션이 서로 다른 도메인 간에 리소스에 안전하게 접근할 수 있도록 보장할 수 있다. 이 가이드를 통해 이제 단일 또는 여러 도메인과 서브도메인에 대해 Nginx에서 CORS를 구성할 수 있을 것이며, allow-origin, allow-methods, allow-headers, expose-headers와 같은 주요 CORS 개념의 중요성도 이해했을 것이다. Nginx 서버가 CORS를 준수하도록 하면 웹 애플리케이션의 보안과 기능성이 향상되어 더 나은 사용자 경험과 다양한 플랫폼 간 호환성이 증가한다. 콘텐츠를 SEO 친화적이고 이해하기 쉽게 만듦으로써 웹 애플리케이션의 발견 가능성과 사용자 참여도 향상될 것이다.