Nginx에서의 CORS 설정 방법

1. CORS 개념 이해

크로스 오리진 리소스 공유(CORS, Cross-Origin Resource Sharing)는 웹 애플리케이션이 다른 도메인에서 제공하는 자원에 접근하도록 허용하는 보안 메커니즘입니다. 브라우저는 요청이 동일한 출처(오리진)가 아닌 경우, 추가적인 HTTP 헤더를 통해 접근 권한을 확인합니다. 이 기술은 프론트엔드 애플리케이션과 백엔드 서버가 서로 다른 도메인에 위치할 때 필수적입니다.

2. Nginx 구성 파일 수정

Nginx의 기본 설정 파일은 일반적으로 /etc/nginx/nginx.conf에 위치하며, 사이트별 설정은 /etc/nginx/sites-available/ 폴더 내에 정의되며 sites-enabled에 심볼릭 링크로 연결됩니다. 특정 도메인에 대한 설정을 적용하려면 해당 server 블록을 찾거나 생성해야 합니다.

3. CORS 헤더 설정

Access-Control-Allow-Origin: 허용된 출처를 지정합니다. 전체 허용을 원하면 * 사용 가능하지만, 인증 정보(쿠키 등)를 포함하는 요청 시에는 구체적인 도메인만 허용됩니다.
Access-Control-Allow-Methods: 허용되는 요청 메서드 목록입니다. 예: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Headers: 클라이언트가 전송할 수 있는 커스텀 헤더를 지정합니다. 예: Content-Type, Authorization
Access-Control-Allow-Credentials: true로 설정하면 쿠키나 인증 정보를 포함한 요청을 허용합니다. 단, 이 경우 Access-Control-Allow-Origin에 *를 사용할 수 없습니다.
Access-Control-Max-Age: 사전 검사 요청(옵션 요청)의 유효 시간(초 단위). 유효 기간 내에는 다시 사전 검사를 수행하지 않습니다.

4. 실제 구성 예시

server {
    listen 80;
    server_name example.com;

    location /api/ {
        # 특정 출처만 허용
        add_header 'Access-Control-Allow-Origin' 'https://trusted-site.com' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
        add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization, X-Requested-With' always;
        add_header 'Access-Control-Allow-Credentials' 'true' always;

        # OPTIONS 요청 처리: 204 응답 반환
        if ($request_method = 'OPTIONS') {
            return 204;
        }

        # 실제 백엔드 엔드포인트로 전달 (예: 프록시)
        # proxy_pass http://backend:3000/api/;
    }
}

모든 출처를 허용하고자 할 경우:

location /api/ {
    add_header 'Access-Control-Allow-Origin' '*' always;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
    add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization, X-Requested-With' always;
    # credentials 허용 불가: *와 함께 사용 불가

    if ($request_method = 'OPTIONS') {
        return 204;
    }
}

5. 설정 적용

설정 변경 후 서비스를 재시작하여 적용합니다:

sudo systemctl restart nginx

또는 시스템에 따라:

sudo service nginx restart

6. 검증 및 디버깅

브라우저 개발자 도구(예: Chrome DevTools)의 네트워크 탭을 활용해 요청 및 응답 헤더를 확인하세요. 올바른 CORS 헤더가 포함되어 있는지 확인하고, 에러 발생 시 /var/log/nginx/error.log를 점검하세요.

7. 보안 고려사항

민감한 데이터에 접근하는 경로는 가능한 한 제한된 출처만 허용하세요.
동적 출처 처리가 필요하다면 map 지시어를 활용해 조건부 헤더 설정이 가능합니다.
실제 요청 흐름을 확인하기 위해 브라우저의 헤더 정보를 정밀하게 분석하세요.

태그: nginx CORS HTTP Header Security Reverse Proxy

7월 1일 20:06에 게시됨

괴물 클럽