はじめに
本記事ではCORSエラーが出てから解消するまで流れを記述しています。
以下のアーキテクチャ図で取得したデータをフロント側で表示、制御をしています。
今回はフロント側からAPIを叩く際にCORSエラーがでて苦戦したのでその部分について書いています。
APIでの認証にAPIキーを使用しています。
基本的にはAPIキーを使用するべきではありませんが、今回は検証用で一時的に利用するものなので使用しています。
API Gatewayの設定
以下のレスポンスヘッダーに'*'を使用して全てのオリジンからのアクセスを許可をしています。
Access-Control-Allow-Headers
Access-Control-Allow-Methods
Access-Control-Allow-Origin
エラーが出た時のコード
今回エラーが出たときに記述していた内容としては以下になります。
const URL = "APIGatewayのエンドポイント";
const API_KEY ="APIと関連付けたAPIキー";
const ID = "DynamoDBテーブルのID";
axios.defaults.headers["X-API-KEY"] = API_KEY;
URLではAPIGatewayで自分が作成したAPIのエンドポイントを定義し、API_KEYでは作成しAPIGatewayと紐付けたAPIキーを定義し、IDはDynamoDBのテーブルで使用したキーを定義しています。
axiosでヘッダーにAPIキーをつける処理のところでエラーが出てしまいました。
フロントエンド側のコンソールを確認するとCORSエラーが出ていました。
エラー解消した後のコード
const URL = "APIGatewayのエンドポイント";
const API_KEY ="APIと関連付けたAPIキー";
const ID = "DynamoDBテーブルのID";
axios.defaults.headers.common["X-API-KEY"] = API_KEY;
headersのあとにcommonを追加でエラー解消できました。
commonはどんな意味を持つのか
この一文では、認証に利用するTokenなどをHeaderに設定したい場合にdefaults値に設定することでaxiosでリクエスト毎にヘッダーに設定せずに済むようにしています。
このエラーを解消しようと色々調べてみまたところcommonを使用しているものが多く出てきました。AXIOSのドキュメントを見てもcommonを使用していました。
このcommonの場所では特定のHTTPリクエストタイプを選択し適用することができcommonにすると全ての種類のHTTPリクエストに適用されることがわかりました。
まとめ
実はこのエラーが出る前に、一度同じアーキテクチャで別のページを作成していたことがあり、今回のAPIを叩く処理はその時と全く同じように作成をしました。前回はcommonをつけずにAPIを叩くことができ、エラーも出なかったので、この処理は間違っていないと思い込んでしまいエラー解消に手間取りました。
通常は特定のリクエストタイプ（get、post など）に対して個別にヘッダーを設定するために使用され、axios.defaults.headers を直接使用してヘッダーを設定する方法は、一般的ではないことが調べる中でわかりました。
一度うまくいった処理を使っていても別のところでエラーが出た場合には、ちゃんと調べることが大事だと思わされました。