2021.11.05現在、React学習をしているところで、簡単なWebアプリを作ろうとしています。startで実行してlocalhostからデバックしようとする際にCORSエラーが発生してしまったので、私が行った対応方法について記載します。Gatewayからデータ取得しようとする時にCORSでエラーになる」という記事を書きました。dynamoDBのごくシンプルな構成となっております。GatewayのURLにGETでアクセスすると、dynamoDBからアイテムの一覧がjsonで取得できるようにしています。Gatewayはプロキシ統合として構築しています。今回はサンプルとして以下の様なjsonデータを返すようにします。開発者ツールでエラー内容を見ると以下メッセージが表示されています。GatewayのURLになります。Sharingの略で、コルスと呼びます。日本語訳するとオリジン間リソース共有と呼びます。フロントとバックエンドが異なるサーバで動作している場合には、この設定をしていないと、フロントからAPIを叩いて、APIサーバーの値を取得したり、保存したりということが出来ません。policy」というルールがあるので、そのルールに従って設定する必要があるという事です。APIGatewayで構築しているの、AWSのページに記載を確認してみます。呼び出そうとすると、「リクエストされたリソースに「Access-Control-Allow-Origin」ヘッダーがありません」というエラーが表示されます。ヘッダーを返さない場合に発生します。エラーをトラブルシューティングする方法を示しています。エラーをトラブルシューティングできます。ヘッダーでサポートされていません」というエラー、および「「Access-Control-Allow-Headers」ヘッダーが存在しません」というエラー。「「Access-Control-Allow-Headers」ヘッダーが存在しません」というエラーは、次のいずれかの理由で発生する可能性があります。メソッドで設定されていない。ヘッダーを返すように設定されていない。エンドポイントにルーティングされていない。Gatewayの裏側でRerutnコードを返しているLambdaに設定する必要がありそうです。対応方法という事で、Lambda側のRerutnコードに追加してあげます。これまでは以下の様なコードでReturnしていました。}「Access-Control-Allow-Headers」ヘッダーが存在しないのでCORSエラーになっているので追加してあげます。“*”」として全てのドメインからアクセスを許可していますが、ここら辺は適宜変更してください。「”Access-Control-Allow-Methods”」についても利用するメソッドだけ記載するほうが良いですね。対応結果Lambda側のコードを修正して、LambdaにDeployしなおすと、CORSエラーが解消されるはずです。まとめReactを学習していてCORSエラーの対応にぶつかりましたが、以前にVue.js使っていた際も同じ問題にぶつかっていたことを思い出しました。セキュリティ部分なので理解したうえで実施することが大事かと思います。私が効率的にAWSを学習するために実施した方法は以下の通りです。※私の場合は1と2を合わせて2か月でソリューションアーキテクトを取得できました。基礎からのネットワーク&サーバー構築」です。基礎からのネットワーク&サーバー構築この本では、AWSの基本サービスを利用したハンズオンを通じて、AWSの基礎を学習することができます。タイトル通りAWSのネットワークやインフラに関しても網羅しているため、もともとインフラ系の技術者ではない人たちにとっても分かりやすい内容だと思います。AWS上にサーバーを設定して開発を行うための準備までするには最良の一冊です。基礎からのネットワーク&サーバー構築2AWS資格取得AWSの基礎をある程度学習することができたら、次はAWS資格を取得しましょう。AWSソリューションアーキテクトを目指しましょう。資格勉強のための問題集をひたすら解きながら、AWSの知識を積み重ねて習得していきましょう!苦行ではありますが、この問題集を3周ほどすればAWS用語や構成に関しても習得できているはずです。今回は以上となります。CloudFormationを使ってはじめてのIaC実践という事で前回の続きとなります。以前にOpenVPNサーバをAWSのEC2上に構築したのですが、その際に少しはまったエラーについて...Program学習Pythonの基礎2(関数基礎)Python基礎的な使い方について忘れ気味だったので自分ようにメモを残しておきます。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。Δgogolonクラウドエンジニア。英語学習ホーム検索トップサイドバータイトルとURLをコピーしました。