Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
4
Help us understand the problem. What is going on with this article?
@yamateion

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

More than 1 year has passed since last update.

概要

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
4
Help us understand the problem. What is going on with this article?
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

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
4
Help us understand the problem. What is going on with this article?