WebブラウザからAWS LambdaへPOSTリクエストを送信するとき、CORSエラーになる問題を解決した

解決方法

Lambdaのレスポンスヘッダに、"Access-Control-Allow-Methods": "POST"を含める

問題となったソースコード

画面の「登録する」ボタンを押すと、insertData関数が実行される。

■Webサーバ(Vue3系)

(検証のために、POSTメソッドだがリクエストパラメータを含めている)

const insertData = async () => {
    const isFormCorrect = await v$.value.$validate()

    if (!isFormCorrect) {
        alert("不適切な値が入力されています")
        return
    }

    let result;
    try {
        result = await axios.post(url2, {
            params: {
                subject_name: insert_form.subject_name,
                used_time: insert_form.used_time,
                study_date: insert_form.study_date
            }
        });
        error_flag.status_code = ""
    } catch (error) {
        if (error.response.status === 422) {
            error_flag.status_code = error.response.status
            console.log("422 error")
            alert("不適切な値が入力されています")
        }
    }
};

■Lambda(Python)

# ここまで略
    response = {
        'statusCode': 201,
        'body': json.dumps({'message': 'Success'}),
        'headers': {
            'Content-Type': 'application/json',
            'Access-Control-Allow-Origin': '*'
            # "Access-Control-Allow-Methods": "POST"
        }
    }
    
    return response