Nginx를 이용한 자바스크립트 API 서버의 CORS 설정 방법

크로스 오리진 리소스 공유 (Cross-Origin Resource Sharing, CORS)는 웹 애플리케이션에서 다른 도메인의 자원을 요청할 때 발생하는 보안 정책을 우회하기 위한 메커니즘입니다. 자바스크립트 기반의 API 서버를 개발하고 있다면, 클라이언트 측에서 자원을 요청할 때 CORS 정책을 허용해주어야 합니다.

Nginx는 뛰어난 웹 서버 소프트웨어로, CORS 정책 설정을 간편하게 구성할 수 있습니다. 이제 Nginx를 사용하여 자바스크립트 API 서버의 CORS 정책을 설정하는 방법을 알아보겠습니다.

1. Nginx 설정 파일 열기

먼저, Nginx의 설정 파일을 엽니다. 일반적으로 Ubuntu 기준으로 /etc/nginx/nginx.conf 파일이나 /etc/nginx/sites-available/default 파일에 위치합니다.

2. CORS 설정 추가

아래 예시 코드를 참고하여, Nginx 설정 파일에 CORS 관련 설정을 추가합니다. 주석을 통해 각 설정 옵션에 대한 설명을 제공했습니다.

location /api {
    # 클라이언트 도메인을 허용합니다.
    add_header 'Access-Control-Allow-Origin' 'https://example.com';
    
    # 요청 헤더를 허용합니다.
    add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept';
    
    # 특정 메서드를 허용합니다 (GET, POST, 등).
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    
    # 클라이언트 요청에 인증을 요구하지 않습니다.
    add_header 'Access-Control-Allow-Credentials' 'true';
    
    # OPTIONS 메서드에 대한 응답을 캐시하지 않습니다.
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Max-Age' 86400;
        add_header 'Content-Length' 0;
        return 204;
    }
    
    # API 서버로 요청을 전달합니다.
    proxy_pass http://localhost:3000;
}

위의 설정은 /api 경로에 대해서 CORS 정책을 적용하고 있습니다. 필요에 따라 경로를 변경하고, 허용할 도메인, 메서드, 헤더 값을 수정할 수 있습니다.

3. Nginx 재시작

설정 파일을 수정한 후, Nginx를 재시작하여 적용합니다. Ubuntu에서는 아래 명령을 사용할 수 있습니다:

sudo service nginx restart

이제 자바스크립트 API 서버의 CORS 설정이 완료되었습니다. 클라이언트 측에서 해당 API에 대한 요청을 제한하지 않고 호출할 수 있게 되었습니다.

이렇게 Nginx를 이용하여 자바스크립트 API 서버의 CORS 정책을 간단히 설정할 수 있습니다. CORS 설정을 통해 클라이언트와 서버 간의 통신을 원할하게 만들어 줄 수 있습니다.