AWS Lambda 배포 시 CORS 문제 해결 : has been blocked by CORS

CORS(Cross-Origin Resource Sharing) 오류 메시지

Access to XMLHttpRequest at 'URL' from origin 'origin' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

CORS 오류는 웹 애플리케이션이 다른 출처(origin)의 리소스에 접근하려 할 때 발생하는 오류입니다. 보안상의 이유로 브라우저는 다른 출처의 리소스에 대한 요청을 차단하는데, 이때 서버 측에서 CORS 정책을 설정해야 합니다.

1. AWS Lambda 콘솔에서 CORS 설정

CORS 오류를 해결하기 위해서는 우선 서버 측에서 Access-Control-Allow-Origin 헤더를 올바르게 설정해야 합니다. 아래의 예시처럼 서버 측 코드에 직접 명시할 수도 있으며, AWS 콘솔에서도 설정이 가능합니다.

Access-Control-Allow-Origin 헤더란?

이 헤더를 사용하여 서버에서 어떤 출처(origin)로부터의 요청을 허용할지 지정할 수 있습니다.

웹 애플리케이션이 http://example.com 출처에서 호스팅되고 있는 경우, 여기에서 다른 도메인인 http://api.example.com로 데이터를 요청하려고 합니다. 이때 Access-Control-Allow-Origin 헤더를 Lambda 함수의 응답 헤더에 다음과 같이 포함시켜야 합니다:

Access-Control-Allow-Origin: http://example.com

위와 같이 헤더를 설정하면 http://example.com 출처에서 호스팅된 웹 애플리케이션에서만 http://api.example.com 에 요청이 허용됩니다. 다른 출처에서의 요청은 차단됩니다.

이 헤더를 올바르게 설정하지 않으면 브라우저는 CORS 오류를 발생시키고 요청을 차단합니다.

직접 작성하는 경우

exports.handler = async (event) => {
    // Lambda 함수 로직 수행

    const response = {
        statusCode: 200,
        headers: {
            "Content-Type": "application/json",
            "Access-Control-Allow-Origin": "http://example.com"
        },
        body: JSON.stringify({ message: "Lambda function response" })
    };

    return response;
};

2. 클라이언트 코드에 mode: "cors" 추가

AWS Lambda 콘솔 에서 CORS 설정을 전부 * 로 했음에도 위와 같은 오류가 발생하여 클라이언트 측에서 아래와 같이 설정하는 것으로 해결하였습니다.

const response = await fetch(url, {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ userInput }),
  mode: "cors", // CORS 요청 모드 설정
});

현재 사용중인 코드에서 fetch 함수를 호출하는 부분에 mode: "cors" 옵션을 설정합니다.

mode: "cors" 옵션

mode: "cors" 옵션을 설정하면 브라우저에서 자동으로 이 헤더를 처리하고 서버에 해당 요청을 보낼 때 CORS 요청으로 인식합니다.

이렇게 CORS 오류를 해결할 수 있습니다.

물론 CORS 오류는 무궁무진하기에.. 이것으로 해결이 안 될 가능성도 있습니다.

 

Reference

• https://evan-moon.github.io/2020/05/21/about-cors/