AWSProgram学習

Reactでaxios経由でAWS API Gatewayからデータ取得しようとする時にCORSでエラーになる

AWS

現在、React学習をしているところで、簡単なWebアプリを作ろうとしています。

そのアプリではAWS API Gateway経由でLambdaを実行してDynamoDBのデータを取得する部分があるのですが、npm startで実行してlocalhostからデバックしようとする際にCORSエラーが発生してしまったので、私が行った対応方法について記載します。

1. バックエンド構成

バックエンドですが、API Gateway -> Lambda -> dynamoDBのごくシンプルな構成となっております。

API GatewayのURLにGETでアクセスすると、dynamoDBからアイテムの一覧がjsonで取得できるようにしています。

API Gatewayはプロキシ統合として構築しています。

今回はサンプルとして以下の様なjsonデータを返すようにします。

[
    {
        "user_name": "guest"
        "time": "2021/10/08 14:47:54"
    },
    {
        "user_name": "guest"
        "time": "2021/10/08 15:27:32"
    },
    .
    .
    .

]

2. エラーの内容

開発者ツールでエラー内容を見ると以下メッセージが表示されています。URLは事前に構築しているAWS API GatewayのURLになります。

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

3. CORSとは

Cross-Origin Resource Sharingの略で、コルスと呼びます。日本語訳するとオリジン間リソース共有と呼びます。

フロントとバックエンドが異なるサーバで動作している場合には、この設定をしていないと、フロントからAPIを叩いて、APIサーバーの値を取得したり、保存したりということが出来ません。

もう少し具体的にいうと、異なるドメイン間での通信は出来ない「same-origin policy」というルールがあるので、そのルールに従って設定する必要があるという事です。

4. CORSエラーの原因調査

今回はAWS APIGatewayで構築しているの、AWSのページに記載を確認してみます。

API Gateway からの CORS エラーのトラブルシューティング
[簡単な説明]
クロスオリジンリソース共有 (CORS) エラーは、サーバーが CORS 標準で要求される HTTP ヘッダーを返さない場合に発生します。API Gateway REST API または HTTP API からの CORS エラーを解決するには、CORS 標準を満たすように API を再設定します

[解決方法]
以下の例は、「「Access-Control-Allow-Origin」ヘッダーが存在しません」という CORS エラーをトラブルシューティングする方法を示しています。なお、同様の手順を使用して、すべての CORS エラーをトラブルシューティングできます。例: 「メソッドは Access-Control-Allow-Methods ヘッダーでサポートされていません」というエラー、および「「Access-Control-Allow-Headers」ヘッダーが存在しません」というエラー。

注: 「「Access-Control-Allow-Headers」ヘッダーが存在しません」というエラーは、次のいずれかの理由で発生する可能性があります。

①API が、必要な CORS ヘッダーを返す OPTIONS メソッドで設定されていない。
②必要な CORS ヘッダーを返すように別のメソッド型 (GET、PUT、POST など) が設定されていない。
③プロキシ統合または非プロキシ統合を持つ API が、必要な CORS ヘッダーを返すように設定されていない。
④プライベート REST API の場合、不正な呼び出し URL が呼び出されるか、トラフィックがインターフェイス仮想プライベートクラウド (VPC) エンドポイントにルーティングされていない。

上のエラーの解決方法でいうろ②と③あたりの対応をAPI Gatewayの裏側でRerutnコードを返しているLambdaに設定する必要がありそうです。

5. 対応方法

という事で、Lambda側のRerutnコードに追加してあげます。

これまでは以下の様なコードでReturnしていました。

def return_success(data):
    return {
        'statusCode': 200,
        'body': json.dumps(data)
    }

「Access-Control-Allow-Headers」ヘッダーが存在しないのでCORSエラーになっているので追加してあげます。

「”Access-Control-Allow-Origin”: “*”」として全てのドメインからアクセスを許可していますが、ここら辺は適宜変更してください。

また「”Access-Control-Allow-Methods”」についても利用するメソッドだけ記載するほうが良いですね。

def return_success(data):
    return {
        'statusCode': 200,
        'headers': {
            "Access-Control-Allow-Origin": "*",
            "Access-Control-Allow-Methods": "POST,GET,PUT,DELETE",
            "Access-Control-Allow-Headers": "Content-Type"
        },
        'body': json.dumps(data)
    }

6. 対応結果

Lambda側のコードを修正して、LambdaにDeployしなおすと、CORSエラーが解消されるはずです。

7. まとめ

Reactを学習していてCORSエラーの対応にぶつかりましたが、以前にVue.js使っていた際も同じ問題にぶつかっていたことを思い出しました。

セキュリティ部分なので理解したうえで実施することが大事かと思います。(本番環境の場合には特に)

AWSを効率的に学習する方法

私がAWSを学習するために使った学習材料は「Udemy」だけです。

まずは座学を行ってAWSプラクティショナー もしくは ソリューションアーキテクト試験を取得することを目標にしました。

具体的にはUdemyで以下の2つの商材を購入して学習しました。AWS公式が提供している模擬試験も受けていません。

Udemyは世界最大級のオンライン学習プラットフォームで、世界中の学びたい人と教えたい人をオンラインでつなぐサービスです。 Udemyは米国Udemy,Inc.が運営するプラットフォームで日本ではベネッセが事業パートナーとして協業をしています。 C2C(consumer to consumer)により生まれる豊富で多彩な講座により個人の学習ニーズに応じた学びをみつけることができます。

これだけでOK! AWS 認定ソリューションアーキテクト – アソシエイト試験突破講座(SAA-C02試験対応版)
【SAA-C02版】AWS 認定ソリューションアーキテクト アソシエイト模擬試験問題集(6回分390問)

今回は以上となります。

コメント

タイトルとURLをコピーしました