AWS API 게이트웨이 - CORS "access-control-allow-origin"- 복수 항목

Question

정의 된 AWS API 게이트웨이에 연결하는 AWS 람다 인스턴스가 있습니다. CORS를 활성화하고 access-control-allow-origin에 http://example.com의 정의를 부여하면 http://example.com에서 람다 인스턴스에 액세스 할 수 있습니다. 그러나 https://example.com을 사용하면 작동하지 않습니다.

AWS에서 와일드 카드를 사용하지 않고 access-control-allow-origin 값을 여러 개 사용하여 어떻게 정의 할 수 있습니까? 나는 *.example.com과 같은 것을 사용하려고 시도했으나 작동하지 않습니다.

EDIT : API 게이트웨이에서 내 값으로 '*'을 사용하지만 내 S3 버킷에 CORS 규칙을 설정하면 안전할까요? 버킷 규칙의 예 :

<?xml version="1.0" encoding="UTF-8"?> 
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> 
    <CORSRule> 
     <AllowedOrigin>http://example.com</AllowedOrigin> 
     <AllowedMethod>GET</AllowedMethod> 
     <AllowedMethod>POST</AllowedMethod> 
     <AllowedMethod>PUT</AllowedMethod> 
     <MaxAgeSeconds>3000</MaxAgeSeconds> 
     <AllowedHeader>*</AllowedHeader> 
    </CORSRule> 
    <CORSRule> 
     <AllowedOrigin>https://example.com</AllowedOrigin> 
     <AllowedMethod>GET</AllowedMethod> 
     <AllowedMethod>POST</AllowedMethod> 
     <AllowedMethod>PUT</AllowedMethod> 
     <MaxAgeSeconds>3000</MaxAgeSeconds> 
     <AllowedHeader>*</AllowedHeader> 
    </CORSRule> 
    <CORSRule> 
     <AllowedOrigin>https://www.example.com</AllowedOrigin> 
     <AllowedMethod>GET</AllowedMethod> 
     <AllowedMethod>POST</AllowedMethod> 
     <AllowedMethod>PUT</AllowedMethod> 
     <MaxAgeSeconds>3000</MaxAgeSeconds> 
     <AllowedHeader>*</AllowedHeader> 
    </CORSRule> 
</CORSConfiguration> 

Answer 1

오늘은 불행히도 이것은 불가능합니다. CORS 스펙은 부분적인 와일드 카드를 허용하지 않으며 현재 API 게이트웨이는 헤더에 대해 단일 정적 값만 허용합니다.

들어오는 호스트 헤더를 기반으로이 값을 동적으로 반환하도록 OPTIONS 메서드를 오버로드 할 수 있습니다.

Answer 2

여러 Origins을 사용하려면 CORS에 항상 귀찮았습니다.

다른 시스템의 일반적인 해결 방법 (예를 들어 표현 /의 nginx 등)에 있습니다 :

• 브라우저가 보낸 Origin 헤더를 검사가 일치하는 경우
• 가 기원
• 의 화이트리스트에 그것을 확인 ,

이 아닌 반환 다른 사람의 Access-Control-Allow-Origin 헤더로 자리 (기본 원산지를) 수신 Origin을 반환 모의 통합을 사용하는 AWS-Gateway의 자동 연결 CORS 지원을 사용하는 것이 가능하지만 사용자가 직접 코드를 작성하여 OPTIONS 요청을 처리하는 것이 가능합니다. 람다 함수로

const allowedOrigins = [ 
    "http://example.com", 
    "http://example.com:8080", 
    "https://example.com", 
    "https?://[a-z]*.?myapp.com", 
    "http://localhost:[0-9]*" 
]; 

exports.handler = (event, context) => { 
    const origin = event.headers.Origin || event.headers.origin; 
    var goodOrigin = false; 

    if (origin) { 
     allowedOrigins.forEach(allowedOrigin => { 
      if (!goodOrigin && origin.match(allowedOrigin)) { 
       goodOrigin = true; 
      } 
     }); 
    } 

    context.succeed({ 
     headers: { 
      "Access-Control-Allow-Headers": "Accept,Accept-Language,Content-Language,Content-Type,Authorization,x-correlation-id", 
      "Access-Control-Expose-Headers": "x-my-header-out", 
      "Access-Control-Allow-Methods": "DELETE,GET,HEAD,OPTIONS,PATCH,POST,PUT", 
      "Access-Control-Allow-Origin": goodOrigin ? origin : allowedOrigins[0] 
     }, 
     statusCode: 204 
    }); 
}; 

저장이 : 아래

는 람다 프록시 통합 작성 예제 코드입니다. API-Gateway에서이 값을 설정하려면 OPTIONS 메서드를 추가하고 Integration Request의 경우 Use Lambda Proxy integration을 선택하고 Lambda Function을 선택하십시오.

물론이 단점은 당신이 람다 함수를 지불하고, 람다 함수를 호출하는 것은 모의 통합에 비해 아마도 50ms 대기 시간이 더 길 것입니다.