API Gateway를 통해 Lambda를 호출하여 CORS에서 멈추었기 때문에 참고.

개요

Vue.js에서 API Gateway를 통해 Lambda 함수를 호출하면 CORS 오류가 발생했습니다. 상황에 따라 Vue.js에서 axios get을 사용하여 인증 된 API Gateway를 통해 Lambda 함수를 호출하면 콘솔에 "Access to XMLHttpRequest at '< API URL>' from origin '< 프론트 URL >' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."라는 오류가 발생했습니다. 그건 그렇고, API Gateway에서 CORS를 활성화하는 것은 이미 이루어졌습니다.

CORS 사용

이를 위해 CORS를 활성화하는 곳에서 씁니다. 자세한 방법은 AWS 공식 문서 이 페이지의 API Gateway 콘솔을 사용하여 리소스에서 CORS 사용에 설명되어 있습니다.
'처음'에서 CORS 사용을 클릭합니다.

다음 화면에서 CORS를 사용하여 기존 CORS 헤더 바꾸기 버튼을 클릭합니다. 다음 화면에서 기존 값 바꾸기 버튼을 클릭합니다. 그러면 CORS가 활성화됩니다.

오류시 상황 및 해결 방법

오류가 발생하면 Lambda 함수를 다음과 같이 작성했습니다.

sample.py

...省略
def lambda_handler(event, context):
    table = dynamoDb.Table(<テーブル名>)
    # DynamoDB からデータを取得 
    response = table.query(
        KeyConditionExpression=Key('<key>').eq('<条件>')
    )
    return response

다음과 같이 테이블에서 얻은 값을 json.dumps() 를 사용하여 JSON 형식으로 변환하고 headers로 Access-Control-Allow-Origin에 '*'를 지정하여 반환하면 잘 작동했습니다. .

sample.py

...省略
def lambda_handler(event, context):
    table = dynamoDb.Table(<テーブル名>)
    data = table.query(
        KeyConditionExpression=Key('<key>').eq('<条件>')
    )
    response = {
        'statusCode': 200,
        'body': json.dumps(data),
        'headers': {'Access-Control-Allow-Origin': '*'}
    }
    return response