API Gateway+Lambdaでlocalhostから接続した際に’Access-Control-Allow-Origin’に関するエラーが出る

9月 17, 2022

かなりハマったのでメモです。

localhostからAPI Gatewayへ接続しようとすると下記のようなエラーが発生しました。

Access to XMLHttpRequest at 'https://****.execute-api.ap-northeast-1.amazonaws.com/****' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

AWSの公式ページなどにはAPI GatewayでOPTION設定をすると解決できることが書かれていますが、私の環境では同じエラーが出続けました。

解決方法としては、API Gatewayだけではなく、Lambda側でも返却データのheadersにCORSエラー回避の設定を入れる必要があるらしく、下記のような記載を入れることでエラーが解決しました。

def lambda_handler(event, context):
    results = 'test'    
    return {
        'statusCode': 200,
        'headers': {
            'Access-Control-Allow-Headers': 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token',
            'Content-Type': 'application/json',
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Methods': 'OPTIONS,POST,GET'
        },
        'body': results
    }