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

해결 방법

No 'Access-Control-Allow-Origin' 오류를 해결하려면 배포 설정을 업데이트하십시오. 그런 다음 캐시를 무효화하여 이전에 캐시된 응답을 지우십시오.

CORS 정책에서 오리진을 허용하는지 확인하십시오.

Access-Control-Allow-Origin 헤더를 반환하려면 오리진의 CORS 정책이 오리진을 허용하는지 확인하십시오.

오리진 서버가 Access-Control-Allow-Origin 헤더를 반환하는지 확인하려면 다음 명령을 실행하십시오.

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

참고: 이전 명령에서 example.com을 오리진 헤더로 바꾸고, https://www.example.net/video/call/System.generateId.dwr을 오류를 반환하는 리소스의 URL로 바꾸십시오.

실행 전 요청에서 다음 명령을 실행하십시오.

curl -X OPTIONS -H "Origin: https://xyz.com"  -H "Access-Control-Request-Method: GET" -v "https://www.example.net/video/call/System.generateId.dwr"

참고: 이전 명령에서 xyz.com을 오리진 헤더로 바꾸고, https://www.example.net/video/call/System.generateId.dwr을 오류를 반환하는 리소스의 URL로 바꾸십시오. 또한 GET을 요청의 HTTP 메서드로 바꾸십시오.

자세한 내용은 MDN Docs 웹 사이트의 실행 전 요청을 참조하십시오.

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: https://example.com
Access-Control-Allow-Methods: GET,POST,OPTIONS
Accept-Ranges: bytes

응답에서 Access-Control-Allow-Origin 헤더를 받지 못하면 오리진 서버가 CORS에 맞게 제대로 설정되지 않은 것입니다. 사용자 지정 오리진 또는 Amazon Simple Storage Service(Amazon S3) 오리진에 CORS 정책을 설정합니다. 사용자 지정 오리진을 설정하는 방법에 대한 정보는 Enable CORS 웹 사이트의 I want to add CORS support to my server 항목을 참조하십시오.

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

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

• Access-Control-Request-Headers
• Access-Control-Request-Method
• Origin(오리진)

참고: CloudFront는 기본적으로 오리진 헤더만 오리진에 전달합니다.

이러한 헤더를 오리진 서버에 전달하려면 CloudFront: CORS-S3Origin 또는 CORS-CustomOrigin에서 사전 정의된 정책 중 하나를 사용하십시오..

배포에 사전 정의된 정책을 추가하려면 다음 단계를 완료하십시오.

1. CloudFront 콘솔에서 배포판을 엽니다.
2. Behaviors(동작) 탭을 선택합니다.
3. **Create Behavior(동작 생성)**를 선택합니다. 또는 기존 동작을 선택한 다음 **Edit(수정)**를 선택합니다.
4. **Cache key and origin requests(캐시 키 및 오리진 요청)**에서 **Cache policy and origin request policy (recommended)(캐시 정책 및 오리진 요청 정책(권장))**을 선택합니다.
5. 그런 다음, 오리진 요청 정책의 경우, 드롭다운 목록에서 CORS-S3Origin 또는 CORS-CustomOrigin을 선택합니다. 자세한 내용은 관리형 오리진 요청 정책 사용을 참조하십시오.
6. **Create Behavior(동작 생성)**를 선택합니다. 또는 기존 동작을 편집하는 경우 **Save changes(변경사항 저장)**를 선택합니다.

캐시 정책을 사용하는 헤더를 전달하려면 다음 단계를 완료하십시오.

1. 캐시 정책을 생성합니다.
2. **Cache key settings(캐시 키 설정)**의 **Headers(헤더)**에서 **Include the following headers(다음 헤더 포함)**를 선택합니다.
3. Add header(헤더 추가) 드롭다운 목록에서 오리진 헤더와 오리진에 필요한 헤더를 선택합니다.
   참고: 간헐적인 CORS 오류를 방지하려면 원본 헤더를 캐시 정책의 일부로 포함하는 것이 좋습니다.
4. 캐시 정책 설정을 구성합니다.
5. 캐시 정책을 CloudFront 배포의 동작에 연결합니다.

레거시 캐시 설정을 사용하는 헤더를 전달하려면 다음 단계를 완료하십시오.

1. CloudFront 콘솔에서 배포판을 엽니다.
2. Behaviors(동작) 탭을 선택합니다.
3. **Create Behavior(동작 생성)**를 선택합니다. 또는 기존 동작을 선택한 다음 **Edit(수정)**를 선택합니다.
4. **Cache key and origin requests(캐시 키 및 원본 요청)**에서 **Legacy cache settings(레거시 캐시 설정)**을 선택합니다.
5. Headers(헤더) 드롭다운 목록에서 오리진에 필요한 헤더를 선택합니다. 또한 CORS 요청에 필요한 세 개의 헤더 즉, Access-Control-Request-Headers, Access-Control-Request-Method, **Origin(오리진)**를 선택합니다. 드롭다운 목록에 나타나지 않는 헤더를 추가하려면 **Add custom(사용자 지정 추가)**를 선택합니다.
6. **Create Behavior(동작 생성)**를 선택합니다. 또는 기존 동작을 편집하는 경우 **Save changes(변경사항 저장)**를 선택합니다.

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

(선택 사항) 클라이언트 또는 최종 사용자가 각 요청에 오리진 헤더를 포함하도록 하려면 CORS 헤더를 추가하도록 CloudFront 함수를 구성하십시오.

HTTP 요청에 OPTIONS 메서드를 허용하도록 CloudFront 배포의 캐시 동작을 구성합니다.

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

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

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

오리진 서버에 액세스할 수 없는 경우 필요한 CORS 헤더를 반환하도록 CloudFront 응답 헤더 정책을 구성하십시오.

오리진에서 필수 CORS 헤더를 반환하도록 정책을 설정할 수 없는 경우 필요한 CORS 헤더를 반환하도록 CloudFront를 구성하십시오. 필요한 CORS 헤더를 반환하도록 CloudFront를 구성하려면 응답 헤더 정책을 생성한 후 다음 단계를 완료하십시오.

1. CloudFront 콘솔에서 배포판을 엽니다.
2. Behaviors(동작) 탭을 선택합니다.
3. **Create Behavior(동작 생성)**를 선택합니다. 또는 기존 동작을 선택한 다음 **Edit(수정)**를 선택합니다.
4. **Response headers policy(응답 헤더 정책)**의 경우 드롭다운 목록에서 기존 응답 정책을 선택합니다. 또는 새 응답 헤더 정책을 생성하려면 **Create policy(정책 생성)**을 선택합니다. 새 정책의 **Cross-origin resource sharing(크로스 오리진 리소스 공유)**에서 **Configure CORS(CORS 구성)**를 켭니다.
5. 정책 설정을 구성한 다음, **Create policy(정책 생성)**을 선택합니다.
6. Create Behavior(동작 생성) 페이지의 드롭다운 목록에서 정책을 선택합니다.
7. **Create Behavior(동작 생성)**를 선택합니다. 또는 기존 동작을 편집하는 경우 **Save changes(변경사항 저장)**를 선택합니다.
   참고: CloudFront는 5분 이내에 배포에 변경 사항을 배포합니다.

관련 정보

CORS 설정을 준수하도록 CloudFront 구성

관리형 응답 헤더 정책 사용