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

최종 업데이트 날짜: 2019년 6월 6일

Amazon CloudFront 배포의 오리진 헤더를 전달하려고 했지만, "No 'Access-Control-Allow-Origin' header is present on the requested resource" 오류가 발생했습니다. 이 오류를 해결하려면 어떻게 해야 합니까? 

간략한 설명

"No 'Access-Control-Allow-Origin' header is present on the requested resource" 오류를 방지하려면 다음을 확인합니다.

  • 오리진의 CORS(교차 오리진 리소스 공유) 정책을 통해 오리진에서 "Access-Control-Allow-Origin" 헤더를 반환할 수 있습니다.
  • CloudFront 배포에서는 적절한 헤더를 화이트리스트에 추가합니다.
  • 그리고 CloudFront 배포의 캐시 동작을 통해 HTTP 요청에 대한 OPTIONS 메서드를 허용합니다.

​해결 방법

오리진의 CORS(교차 오리진 리소스 공유) 정책을 통해 오리진에서 "Access-Control-Allow-Origin" 헤더 반환

다음과 유사한 curl 명령을 실행하여 오리진에서 "Access-Control-Allow-Origin" 헤더를 반환하는지 확인합니다.

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

CORS 정책을 통해 오리진에서 헤더를 반환하는 경우 명령은 다음과 유사한 메시지를 반환합니다. 

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

NGINX에서 오리진에 대한 CORS 정책을 업데이트하려면 관련 지침은 CORS on Nginx를 참조하십시오. Amazon Simple Storage Service(Amazon S3) 버킷인 오리진에 대한 정책을 업데이트하려면 관련 지침 CORS(교차 오리진 리소스 공유) 활성화를 참조하십시오.

CloudFront 배포의 캐시 동작을 통해 HTTP 요청에 대한 OPTIONS 메서드 허용

오리진에서 CORS를 설정한 후에 오리진에 필요한 헤더를 전달하도록 CloudFront 배포를 구성합니다. 오리진이 S3 버킷인 경우 일반적으로 다음 헤더를 Amazon S3에 전달하고 화이트리스트에 추가하도록 배포를 구성해야 합니다.

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

CloudFront 배포에서 헤더를 전달하려면 다음 단계를 수행합니다.

  1. CloudFront 콘솔에서 배포를 엽니다.
  2. [Behaviors] 탭을 선택합니다.
  3. [Create Behavior]를 선택하거나 기존 동작을 선택하고 [Edit]를 선택합니다.
  4. [Cache Based on Selected Request Headers]에서 [Whitelist]를 선택합니다.
  5. [Whitelist Headers] 아래 왼쪽의 메뉴에서 헤더를 선택하고 [Add]를 선택합니다.
  6. [Yes, Edit]를 선택합니다.

참고: 요청의 일부로 오리진에 헤더도 전달해야 합니다.

CloudFront 배포의 캐시 동작을 통해 OPTIONS 요청 허용

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

CloudFront 배포에서 OPTIONS 메서드를 활성화하려면 다음 단계를 수행합니다.

  1. CloudFront 콘솔에서 배포를 엽니다.
  2. [Behaviors] 탭을 선택합니다.
  3. [Create Behavior]를 선택하거나 기존 동작을 선택하고 [Edit]를 선택합니다.
  4. [Allowed HTTP Methods]에서 [GET, HEAD, OPTIONS]를 선택합니다.
  5. [Yes, Edit]를 선택합니다.

이 문서가 도움이 되었습니까?

AWS에서 개선해야 할 부분이 있습니까?


도움이 필요하십니까?