Help us understand the problem. What is going on with this article?

API Gateway 経由で Lambda 呼び出して CORS ではまったのでメモ。

概要

Vue.js から API Gateway 経由で Lambda 関数を呼び出したら CORS のエラーが出てはまったので書きます。状況としては、Vue.js で axios の get を使用して、認証ありの API Gateway 経由で Lambda 関数を呼び出したら、console に "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の有効化」 をクリックします。
image.png
次の画面で、「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
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away