CloudFront의 "No 'Access-Control-Allow-Origin' header is present on the requested resource" 오류를 해결하려면 어떻게 해야 합니까?

해결 방법

오리진의 CORS(교차 오리진 리소스 공유) 정책에서 오리진이 "Access-Control-Allow-Origin" 헤더를 반환하도록 허용하는지 확인

참고: AWS Command Line Interface(AWS CLI) 명령을 실행할 때 오류가 발생할 경우 AWS CLI의 최신 버전을 사용하고 있는지 확인하세요.

다음 명령을 실행하여 오리진 서버가 Access-Control-Allow-Origin 헤더를 반환하는지 확인합니다. example.com을 필수 오리진 헤더로 바꿉니다. https://www.example.net/video/call/System.generateId.dwr을 헤더 오류를 반환하는 리소스의 URL로 바꿉니다.

curl -H "Origin: example.com" -v "https://www.example.net/video/call/System.generateId.dwr"

CORS 정책이 오리진 서버가 Access-Control-Allow-Origin 헤더를 반환하도록 허용하는 경우 다음과 유사한 응답이 표시됩니다.

HTTP/1.1 200 OK
Server: nginx/1.10.2
Date: Mon, 01 May 2018 03:06:41 GMT
Content-Type: text/html
Content-Length: 3770
Last-Modified: Thu, 16 Mar 2017 01:50:52 GMT
Connection: keep-alive
ETag: "58c9ef7c-eba"
Access-Control-Allow-Origin:
    example.com
Accept-Ranges: bytes

응답에서 CORS 헤더가 반환되지 않으면 오리진 서버가 CORS에 대해 올바르게 설정되지 않은 것입니다. 사용자 지정 오리진 또는 Amazon Simple Storage Service(S3) 오리진에 CORS 정책을 설정합니다.

오리진 서버에 적절한 헤더를 전달하도록 CloudFront 배포 구성

오리진 서버에서 CORS 정책을 설정한 후 오리진 헤더를 오리진 서버로 전달하도록 CloudFront 배포를 구성합니다. 오리진 서버가 Amazon S3 버킷인 경우 다음 헤더를 Amazon S3에 전달하도록 배포를 구성합니다.

• Access-Control-Request-Headers
• Access-Control-Request-Method
• 오리진

오리진 서버에 헤더를 전달하기 위해 CloudFront에는 오리진 유형에 따라 CORS-S3Origin 및 CORS-CustomOrigin이라는 두 가지 사전 정의된 정책이 있습니다.

배포에 사전 정의된 정책을 추가하려면 다음을 수행합니다.

1. CloudFront 콘솔에서 배포를 엽니다.
2. 동작(Behaviors) 탭을 선택합니다.
3. 동작 생성을 선택합니다. 또는 기존 동작을 선택한 다음 편집을 선택합니다.
4. 캐시 키 및 오리진 요청에서 캐시 정책 및 오리진 요청 정책을 선택합니다. 그런 다음 오리진 요청 정책에 대해 드롭다운 목록에서 CORS-S3Origin 또는 CORS-CustomOrigin을 선택합니다. 자세한 내용은 관리형 오리진 요청 정책 사용을 참조하세요.
   참고: 대신 자체 캐시 정책을 생성하려면 캐시 정책 생성을 참조하세요.
5. 동작 생성을 선택합니다. 또는 기존 동작을 편집하는 경우 변경 사항 저장을 선택합니다.

캐시 정책을 사용하여 헤더를 전달하려면 다음을 수행합니다.

1. 캐시 정책을 생성합니다.
2. 캐시 키 설정에서 헤더에 대해 다음 헤더 포함을 선택합니다. 헤더 추가 드롭다운 목록에서 오리진에 필요한 헤더 중 하나를 선택합니다.
3. 정책을 연결할 동작에 필요한 대로 캐시 정책 설정을 채웁니다.
4. 캐시 정책을 CloudFront 배포의 동작에 연결합니다.

레거시 캐시 설정을 사용하여 헤더를 전달하려면 다음을 수행합니다.

1. CloudFront 콘솔에서 배포를 엽니다.
2. 동작(Behaviors) 탭을 선택합니다.
3. 동작 생성을 선택합니다. 또는 기존 동작을 선택한 다음 편집을 선택합니다.
4. 캐시 키 및 오리진 요청에서 레거시 캐시 설정을 선택합니다.
5. 헤더 드롭다운 목록에서 오리진에 필요한 헤더를 선택합니다. 사용자 정의 추가를 선택하여 오리진에 필요한 헤더 중 드롭다운 목록에 없는 헤더를 추가합니다.
6. 동작 생성을 선택합니다. 또는 기존 동작을 편집하는 경우 변경 사항 저장을 선택합니다.

참고: 또한 클라이언트 요청의 일부로 헤더를 CloudFront에 전달해야 합니다. 그러면 CloudFront가 오리진에 헤더를 전달합니다.

CloudFront 배포의 캐시 동작이 HTTP 요청에 대한 OPTIONS 메서드를 허용하도록 구성

CORS 정책을 업데이트하고 적절한 헤더를 전달한 후에도 오류가 발생하면 배포의 캐시 동작에서 OPTIONS HTTP 메서드를 허용합니다. 기본적으로 CloudFront는 GET 및 HEAD 메서드만 허용합니다. 그러나 일부 웹 브라우저에서는 OPTIONS 메서드에 대한 요청을 발행할 수 있습니다. CloudFront 배포에서 OPTIONS 메서드를 활성화하려면 다음을 수행합니다.

1. CloudFront 콘솔에서 배포를 엽니다.
2. 동작(Behaviors) 탭을 선택합니다.
3. 동작 생성을 선택합니다. 또는 기존 동작을 선택한 다음 편집을 선택합니다.
4. 허용되는 HTTP 메서드에서 GET, HEAD, OPTIONS를 선택합니다.
5. 동작 생성을 선택합니다. 또는 기존 동작을 편집하는 경우 변경 사항 저장을 선택합니다.

필요한 Access-Control-Allow-Origin 헤더를 반환하도록 CloudFront 응답 정책 구성

오리진 서버에 액세스할 수 없거나 적절한 CORS 헤더를 반환하도록 설정할 수 없는 경우 필요한 CORS 헤더를 반환하도록 CloudFront를 구성합니다. 구성하려면 응답 헤더 정책을 생성합니다.

1. CloudFront 콘솔에서 배포를 엽니다.
2. 동작(Behaviors) 탭을 선택합니다.
3. 동작 생성을 선택합니다. 또는 기존 동작을 선택한 다음 편집을 선택합니다.
4. 응답 헤더 정책의 경우
   드롭다운 목록에서 기존 응답 정책을 선택합니다.
   -또는-
   정책 생성을 선택하여 새 응답 헤더 정책을 생성합니다. 새 정책의 교차 오리진 리소스 공유에서 CORS를 활성화합니다.
5. 필요에 따라 다른 설정을 입력하고 정책 생성을 선택합니다.
6. 동작 생성 페이지의 드롭다운 목록에서 생성한 정책을 선택합니다.
7. 동작 생성을 선택합니다. 또는 기존 동작을 편집하는 경우 변경 사항 저장을 선택합니다.

참고: CloudFront는 일반적으로 5분 이내에 배포에 변경 사항을 배포합니다. 배포를 수정한 후에는 캐시를 무효화하여 이전에 캐시된 응답을 지웁니다.

관련 정보

CORS 설정을 존중하도록 CloudFront 구성

CORS(교차 오리진 리소스 공유) 구성

관리형 응답 헤더 정책 사용

응답에 CORS(교차 오리진 리소스 공유) 헤더 추가