API Gateway + Lambda CORS 관련 오류 해결

4387 단어 APIGateway람다AWS
API Gateway와 Lambda에서 웹 앱의 API 엔드포인트를 만들고 외부 사이트의 시스템에서 호출하려고 하면 CORS(Cross-origin resource sharing) 오류가 발생하여 설정에 걸렸습니다.

기본 대책



API Gateway에서 CORS 사용



API Gateway 작업에서 CORS 활성화를 설정하는 것이 기본 조치입니다.
보통은 이것으로 OK일 것.

오류가 발생하여 설정을 반영할 수 없는 경우



내 환경에서 다음과 같은 오류가 제대로 설정되지 않았습니다.Invalid Response status code specified


대책(응답 헤더를 수동으로 설정)


  • 상기 화면에서 에러가 된 내용을 메모
  • 리소스에서 오류가있는 메서드 (GET 또는 POST)를 선택합니다.
  • 응답 추가 선택
  • HTTP 상태에 200을 입력하여 확정 (체크 마크와 같은 것을 클릭)
  • 200 개의 왼쪽에 ▶가 표시되므로 그것을 클릭하여 열립니다
  • 200 응답 헤더의 입력란이 표시되므로 오류가 발생한 헤더를 설정합니다.

    화면




    ↑여기 선택

    ↑이런 방식으로 수동 설정

    확인



    상기를 수정하고, 또 한번 CORS의 유효화를 행하면(자), 헤더를 기입한 메소드는 에러가 해소되고 있다.
    모든 메소드에 대해 위의 방법으로 수동 설정했는데 CORS 활성화시의 에러가 없어졌습니다.
    (Access-Control-Allow-Origin 통합 응답 헤더 매핑)이라는 것만으로 에러를 해소할 수 없는 일이 있었습니다만, 우선 액세스는 할 수 있었습니다. 어쩌면 아래의 Lambda 쪽으로 해결할 수 있을까? 라고 생각합니다.

    (!) CORS를 활성화하면 배포를 잊지 마세요!
    통합이 아닌 다른 에러가 해소하고 싶은데 여전히 액세스할 수 없는 등의 경우는, API Gateway의 배포를 잊지 않고. (익숙한 사람은 당연한 것일지도 모르지만 자신은 배포를 잊고 엄청나게 줬습니다)

    Lambda의 응답



    위에서 API Gateway의 CORS는 설정할 수 있지만, 그 앞이 Lambda인 경우는 Lambda의 응답도 설정해야 합니다. 우선 전부 허가하는 경우는, 이런 느낌이 됩니다.
    exports.handler = async (event) => {
    const response = {
        statusCode: 200,
        headers: {
            "Access-Control-Allow-Headers" : "Content-Type",
            "Access-Control-Allow-Origin": "*",
            "Access-Control-Allow-Methods": "GET"
        },
        'body': JSON.stringify({
            message: 'hello world Test2!!',
        })
    };
    return response;
};

    참고



    h tps : // s t c ゔ ぇ rf ぉ w. 코 m / 쿠에 s 치온 s / 45820769 / 훗이 l과 에나 b
    htps : // / cs. 아 ws. 아마존. 이 m / 그럼 _ jp / 아피가 테와 y / ㅁ st / ゔ ぇ ぺ ぺ ぐ い で / 호 w - 토코 rs. HTML
    • [AWS] API Gateway와 JSON 서버에서 동적 html 렌더링을 시도했습니다.
    API Gateway→VPC Link→NLB→EC2의 API를 두드리는

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage