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

최종 업데이트 날짜: 2021년 9월 14일

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

간략한 설명

"요청한 리소스에 'Access-Control-Allow-Origin' 헤더가 없음" 오류를 방지하려면 다음을 확인하십시오.

  • 오리진의 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 NGIINX에서 관련 지침을 참조하세요. Amazon Simple Storage Service(Amazon S3) 버킷인 오리진에 대한 정책을 업데이트하려면 CORS 구성의 지침을 참조하십시오.

CloudFront 배포가 적절한 헤더를 전달함

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

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

S3 또는 사용자 지정 오리진에 대해 CORS를 활성화하려면 오리진에 필요한 헤더를 전달해야 합니다. CloudFront에는 사용된 오리진 유형에 따라 두 가지 사전 정의된 정책, 즉 CORS-S3OriginCORS-CustomOrigin이 있습니다. 이러한 정책을 배포에 추가하려면 다음 단계를 수행하십시오.

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

오리진 요청 정책을 사용하여 헤더를 전달하려면 다음 단계를 수행하십시오.

  1. 단계에 따라 CloudFront 콘솔을 사용하여 캐시 정책을 생성합니다.
  2. 캐시 키 설정(Cache key settings)에서 헤더(Headers)에 대해 다음 헤더 포함(Include the following headers)을 선택합니다. 헤더 추가(Add header) 드롭다운 목록에서 오리진에 필요한 헤더 중 하나를 선택합니다.
  3. 정책을 연결할 동작의 요구 사항에 따라 캐시 정책의 다른 모든 설정을 완료합니다.
  4. CloudFront 배포의 관련 동작에 정책을 연결하는 단계를 따라 합니다.

기존 캐시 설정을 사용하여 헤더를 전달하려면 다음의 단계를 따르세요.

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

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

CloudFront 배포의 캐시 동작이 HTTP 요청에 대한 OPTIONS 메서드를 허용함

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

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

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

참고: CloudFront는 일반적으로 5분 이내에 배포에 변경 사항을 배포합니다. 배포를 편집한 후 캐시를 무효화하는 것이 좋습니다. 그렇지 않으면 이전에 캐시된 응답을 받을 수 있기 때문입니다.


이 문서가 도움이 되었나요?


결제 또는 기술 지원이 필요하세요?