apigw가 있는 cors

🌐🔗🌒🐙

json을 제공하고 수락하는 두 개의 끝점이 있는 리소스/pitbulls가 있는 새로 마운트된 apigw를 가정해 보겠습니다.
GET /pitbullsPOST /pitbulls
브라우저에서 이것들을 치기 시작하면 cors를 활성화해야 합니다.

cors 요청 유형 결정

cors 요청에는 단순 및 단순하지 않은 두 가지 유형이 있습니다. AWS docs MDN docs 4가지 세부 사항을 참조하십시오.

단순 요청에는 다음과 같은 특성이 있습니다.

GET , HEAD 또는 POST

if POST 요청에 원본 헤더가 포함되어야 합니다

요청 페이로드 콘텐츠 유형은 text/plain , multipart/form-data 또는 application/x-www-form-urlencoded

입니다.

사용자 정의 헤더가 없음

2단계 cors 활성화

4가지 간단한 요청

시나리오: GET /pitbulls
백엔드 응답에는 요청의 원본 도메인에 대한 액세스 권한을 부여하는 Access-Control-Allow-Origin 헤더가 포함되어야 합니다. 오리진을 정의할 때 프로토콜, 도메인 및 포트를 지정해야 합니다.

간단한 cors 요청에 대한 백엔드 응답

return {
  statusCode: 200,
  headers: {
    "access-control-allow-origin": "https://your.domain:443",
    "content-type": "application/json"
  },
  body: '[{"name":"dogo"}]'
}

4가지 단순하지 않은 요청

시나리오: POST /pitbulls 요청 페이로드 포함content-type: application/json
우리의 pitbulls 리소스는 다음 cors 헤더를 사용하여 cors preflight 요청에 응답하는 OPTIONS 메서드를 노출해야 합니다. Access-Control-Allow-Methods Access-Control-Allow-Headers Access-Control-Allow-Origin
Cloudformation의 cors 옵션 메소드 스니펫

CorsMethod:
  Type: AWS::ApiGateway::Method
  Properties:
    AuthorizationType: NONE
    RestApiId: !Ref RestApi
    ResourceId: !Ref PitbullsResource
    HttpMethod: OPTIONS
    Integration:
      Type: MOCK
      IntegrationResponses:
        - StatusCode: 200
          ResponseParameters:
            method.response.header.Access-Control-Allow-Headers: "'content-type'"
            method.response.header.Access-Control-Allow-Methods: "'OPTIONS,GET,POST'"
            method.response.header.Access-Control-Allow-Origin: !If
              - IsProd
              - "'https://your.domain:443'"
              - "'*'"
          ResponseTemplates:
            application/json: ''
      PassthroughBehavior: WHEN_NO_MATCH
      RequestTemplates:
        'application/json': '{"statusCode":200}'
    MethodResponses:
      - StatusCode: 200
        ResponseModels:
          application/json: Empty
        ResponseParameters:
          method.response.header.Access-Control-Allow-Headers: False
          method.response.header.Access-Control-Allow-Methods: False
          method.response.header.Access-Control-Allow-Origin: False

또한 백엔드, 람다, ec2 또는 무엇이든 위에 나열된 3개의 cors 헤더로 응답해야 합니다.

필수 헤더를 사용하여 단순하지 않은 cors 요청에 응답하는 백엔드

return {
  statusCode: 201,
  headers: {
    "access-control-allow-headers": "content-type",
    "access-control-allow-methods": "OPTIONS,POST",
    "access-control-allow-origin": "https://your.domain:443",
  },
}

🐙🌐🔗🌒 ~ AWS API 게이트웨이 CORS