배경.

AWS S3 + API Gateway 조합을 사용하여 개인 웹 애플리케이션을 만들고 있습니다.
API Gateway 부분은 로컬 기기로 구축(AWS Outposts와 같은 서비스도 있음)할 수 없기 때문에 선행 개발에서 로컬에서 API Gateway에 접근하려고 한다.이때 필요한 것은 CORS 설정입니다.
AWS 콘솔에서 설정할 수도 있습니다.다만, API 부분은 스웨거로 설계돼 있어 스웨거에 지정하려고 했다.

구성도와 관련된 부분.

이 그림의 빨간색 부분.이렇게 되면 APIGateway에 액세스할 수 없습니다.상세한 내용은 여러분의 많은 지지를 바랍니다. 간단하게 말하면 이것은 다른 사이트에서 함부로 인용되는 것을 방지하는 구조라고 생각합니다(제 생각에는).S3의 정식 디버깅 상태에서 API와 static 자원은 클라우드 Front 필드로 변하기 때문에 문제가 없지만 로컬 개발의 경우 필드가 다르기 때문에 API에 접근할 수 없습니다.
(참고로 컬지령 등은 브라우저가 아닌 방법으로 접근할 수 있으며 CORS 설정이 없으면 안전하다고 할 수 없습니다.)

절차.

AWS 콘솔을 통해 APIGateway 서비스로 이동하고 대상 API

를 선택합니다.

CORS 설정 전의 APIGateway 정보를 내보내거나 백업할 수도 있습니다.

관문에서 대상을 선택하는 관문

오른쪽 창의 내보내기 탭으로 이동합니다.다음 형식으로 내보낼 때 swagger를 선택한 다음 swagger+API Gateway 확장 형식으로 내보낸 다음 YAML을 선택하고 파일을 저장합니다.

AWS 콘솔에서 객체 끝점 중 하나에 대한 CORS 설정

리소스에서 대상 엔드포인트 선택

작업 단추에서 CORS 유효성 검사

이 단추에서 API 해제를 실행합니다.2에서 선택한 스테이지 선택 및 디버깅

2와 같이 내보내고 차분 비교(git commiit 또는 저장할 때 파일 이름 변경 등 이후 차분 비교 가능)

swagger 편집기에서 다른 노드 응용 4에서 검출된 차이점

API Gateway의 각 단점-각 방법의 종합 요청에서 Lambda 에이전트를 사용하여 통합된 방법과 결합된 lambda 함수의 응답에 헤더 정보 추가(2019-11-10 보충)

디테일

3단계 수행 시 정보

Create OPTIONS method
Add 200 Method Response with Empty Response Model to OPTIONS method
Add Mock Integration to OPTIONS method
Add 200 Integration Response to OPTIONS method
Add Access-Control-Allow-Headers, Access-Control-Allow-Methods, Access-Control-Allow-Origin Method Response Headers to OPTIONS method
Add Access-Control-Allow-Headers, Access-Control-Allow-Methods, Access-Control-Allow-Origin Integration Response Header Mappings to OPTIONS method
Add Access-Control-Allow-Origin Method Response Header to GET method
Add Access-Control-Allow-Origin Integration Response Header Mapping to GET method
Add Access-Control-Allow-Origin Method Response Header to POST method
Add Access-Control-Allow-Origin Integration Response Header Mapping to POST method

간단하게 말하면 다음과 같은 처리를 한 것 같다.

OPTIONS 방법 추가, 필요한 헤드 설정 추가

이 단점의 다른 GET 또는 POST 방법에 헤더 설정

추가

실제의 차이

OPION 메소드 추가 섹션

    options:
      consumes:
      - "application/json"
      produces:
      - "application/json"
      responses:
        200:
          description: "200 response"
          schema:
            $ref: "#/definitions/Empty"
          headers:
            Access-Control-Allow-Origin:
              type: "string"
            Access-Control-Allow-Methods:
              type: "string"
            Access-Control-Allow-Headers:
              type: "string"
      x-amazon-apigateway-integration:
        responses:
          default:
            statusCode: "200"
            responseParameters:
              method.response.header.Access-Control-Allow-Methods: "'GET,OPTIONS,POST'"
              method.response.header.Access-Control-Allow-Headers: "'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token'"
              method.response.header.Access-Control-Allow-Origin: "'http://localhost:8080'"
        requestTemplates:
          application/json: "{\"statusCode\": 200}"
        passthroughBehavior: "when_no_templates"
        type: "mock"

●Allow-Origin 등 AWS 콘솔에서 살짝 건드린 부분도 있다.
GET, POST 등 기존 방법에서 추가된 부분

      responses:
        200:
          description: "200 response"
          schema:
            $ref: "#/definitions/Hogehoge"
          # 以下部分が追加されました。
          headers:
            Access-Control-Allow-Origin:
              type: "string"
            Access-Control-Allow-Methods:
              type: "string"
            Access-Control-Allow-Headers:
              type: "string"

/중략/

      x-amazon-apigateway-integration:
        uri: "arn:aws:apigateway:ap-northeast-1:lambda:path/2015-03-31/functions/arn:aws:lambda:ap-northeast-1:{ACCOUNT ID}:function:fugafuga-lambda-function/invocations"
        responses:
          default:
            statusCode: "200"
            # 以下部分が追加されました。
            responseParameters:
              method.response.header.Access-Control-Allow-Methods: "'GET,OPTIONS,POST'"
              method.response.header.Access-Control-Allow-Headers: "'Content-Type,X-Amz-Date,Authorization,X-Api-Key'"
              method.response.header.Access-Control-Allow-Origin: "'http://localhost:8080'"

AWS 콘솔에서 각 단점, 각 방법의 방법으로 응답하는 200의 응답 헤드에 3개의 제목 설정(전자차)을 추가하고, 종합적으로 응답하는 200 응답의 설정 내 제목의 맵에 3개의 제목(후자차)을 추가한다.

lambda 함수의 반환값에 헤더 정보 추가

APIGateway의 각 끝점 - 각 방법의 종합 요청에서 Lambda 프록시를 사용하여 병합하는 방법에서는 종합 응답을 설정할 수 없습니다.그 방법은 lambda에서 헤더를 지정해야 합니다.

    return {
        'statusCode': 200,
        'body': json.dumps(ret, indent=0),
        # この部分追加
        'headers': {
            'Access-Control-Allow-Headers' : 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token',
            'Access-Control-Allow-Methods' : 'GET,OPTIONS,POST',
            'Access-Control-Allow-Origin' : 'http://localhost:8080'
        },
        'isBase64Encoded': False
    }

(2019-11-10 추기)

참고 가치가 있는 사이트

AWS 공식 웹사이트 API Gateway REST API 리소스의 CORS 활성화

반성하다.

이 기사를 쓸 때 자세히 찾아보니 OpenAPI로 설명된 공식 사이트가 발견됐다.그리고 위에 링크 근처에 있습니다.
AWS 공식 웹사이트 API Gateway의 API 가져오기를 사용하여 리소스에서 CORS 활성화
항상 swagger를 지켜보고 있습니다. OpenAPI는 swagger의 확장판입니다. (혹은 업그레이드 후 이름이 바뀌었나요?)그래?
GitHub - OpenAPI Specification
그렇게 말하지만 방대한 공식 문서를 한 번 읽고 흡수할 수 있는 사람은 일부분에 불과하다.많은 사람들이 조금씩 이해 영역을 늘릴 때 공식 문서를 읽는다.묻힐까 고민도 해봤지만, 자신과 같은 사람에게 참고가 될 가능성이 크다고 생각해 투고했다.