REST API 리소스에 대한 CORS 활성화

CORS(Cross-origin 리소스 공유)는 브라우저에서 실행 중인 스크립트에서 시작되는 cross-origin HTTP 요청을 제한하는 브라우저 보안 기능입니다. REST API의 리소스가 비 단순 cross-origin HTTP 요청을 받을 경우 CORS 지원을 활성화해야 합니다.

CORS 지원 활성화 여부 확인

cross-origin HTTP 요청은 다음에 대해 이루어지는 요청입니다.

• 다른 도메인(예: example.com에서 amazondomains.com으로)

• 다른 하위 도메인(예: example.com에서 petstore.example.com으로)

• 다른 포트(예: example.com에서 example.com:10777으로)

• 다른 프로토콜(예: https://example.com에서 http://example.com으로)

Cross-origin HTTP 요청은 단순 요청과 비 단순 요청의 두 가지 유형으로 나눌 수 있습니다.

다음과 같은 모든 조건을 충족하는 HTTP 요청은 단순 요청입니다.

• GET, HEAD, POST 요청만 허용하는 API 리소스에 대해 발행된 요청입니다.

• POST 메서드 요청인 경우 Origin 헤더를 포함해야 합니다.

• 요청 페이로드 콘텐츠 유형이 text/plain, multipart/form-data 또는 application/x-www-form-urlencoded입니다.

• 요청에 사용자 지정 헤더가 없습니다.

• 단순 요청에 대한 Mozilla CORS 문서에 나열된 추가 요청.

단순 cross-origin POST 메서드 요청의 경우 해당 리소스로부터의 응답에 Access-Control-Allow-Origin 헤더가 포함되어야 합니다. 헤더 키 값은 '*'(임의의 오리진)으로 설정되거나, 해당 리소스에 대한 액세스가 허용되는 오리진으로 설정됩니다.

다른 모든 cross-origin HTTP 요청은 비 단순 요청입니다. API의 리소스에서 비 단순 요청을 수신하는 경우 CORS 지원을 활성화해야 합니다.

CORS 지원 활성화의 의미

브라우저에서 비 단순 HTTP 요청을 받을 경우 CORS 프로토콜은 브라우저에 preflight 요청을 서버로 보내고, 서버 승인(또는 자격 증명에 대한 요청)을 기다린 후 실제 요청을 보내도록 요구합니다. preflight 요청은 API에 다음과 같은 HTTP 요청으로 나타납니다.

• Origin 헤더를 포함합니다.

• OPTIONS 메서드를 사용합니다.

• 다음 헤더를 포함합니다.

  • Access-Control-Request-Method

  • Access-Control-Request-Headers

CORS를 지원하기 위해 REST API 리소스는 페치 표준에서 요구하는 다음과 같은 응답 헤더를 한 개 이상 포함하는 OPTIONS preflight 요청에 응답할 수 있는 OPTIONS 메서드를 구현해야 합니다.

• Access-Control-Allow-Methods

• Access-Control-Allow-Headers

• Access-Control-Allow-Origin

CORS 지원을 활성화하는 방식은 API의 통합 유형에 따라 다릅니다.

모의 통합을 위해 CORS 지원 활성화

모의 통합의 경우, 필요한 응답 헤더를 메서드 응답 헤더(적절한 정적 값 포함)로 반환하는 OPTIONS 메서드를 생성하여 CORS를 활성화합니다. 또한 실제 CORS 활성화 메서드는 최소 200 응답에 Access-Control-Allow-Origin:'request-originating server addresses' 헤더를 반환해야 합니다. 헤더 키의 값은 '*'(임의의 오리진)으로 설정되거나 리소스에 대한 액세스를 허용하는 오리진으로 설정됩니다

Lambda 또는 HTTP 비 프록시 통합 및 AWS 서비스 통합을 위해 CORS 지원 활성화

Lambda 사용자 지정(비 프록시) 통합, HTTP 사용자 지정(비 프록시) 통합 또는 AWS 서비스 통합의 경우, API Gateway 메서드 응답 및 통합 응답 설정을 사용하여 필요한 헤더를 설정할 수 있습니다. AWS Management Console을 사용하여 CORS를 활성화하는 경우 API Gateway에서 OPTIONS 메서드를 생성하고 기존 메서드 통합 응답에 Access-Control-Allow-Origin 헤더를 추가하려고 시도합니다. 항상 이를 수행하는 것은 아니므로 경우에 따라 통합 응답을 수동으로 수정하여 CORS를 적절하게 활성화해야 합니다. 일반적으로 이 작업은 Access-Control-Allow-Origin 헤더를 반환하기 위해 통합 응답을 수동으로 수정하는 것입니다.

Lambda 또는 HTTP 프록시 통합을 위해 CORS 지원 활성화

Lambda 프록시 통합 또는 HTTP 프록시 통합의 경우에도, 필요한 OPTIONS 응답 헤더를 API Gateway에 설정할 수 있습니다. 하지만 프록시 통합은 통합 응답을 반환하지 않기 때문에 백엔드에서 Access-Control-Allow-Origin 및 Access-Control-Allow-Headers 헤더를 반환해야 합니다.

다음 예제 Lambda 함수는 필요한 CORS 헤더를 반환합니다.

Node.js

exports.handler = async (event) => {
    const response = {
        statusCode: 200,
        headers: {
            "Access-Control-Allow-Headers" : "Content-Type",
            "Access-Control-Allow-Origin": "https://www.example.com",
            "Access-Control-Allow-Methods": "OPTIONS,POST,GET"
        },
        body: JSON.stringify('Hello from Lambda!'),
    };
    return response;
};

Python 3

import json

def lambda_handler(event, context):
    return {
        'statusCode': 200,
        'headers': {
            'Access-Control-Allow-Headers': 'Content-Type',
            'Access-Control-Allow-Origin': 'https://www.example.com',
            'Access-Control-Allow-Methods': 'OPTIONS,POST,GET'
        },
        'body': json.dumps('Hello from Lambda!')
    }

주제

• API Gateway 콘솔을 사용하여 리소스에서 CORS 활성화
• API Gateway 가져오기 API를 사용하여 리소스에서 CORS 활성화
• CORS 테스트