lamdaで作成されたRESTAPIのアクセスで、CORSエラー

Question

実現したいこと

flutterでwebページを作成し、AWSのlamdaで作成したRESTAPIを呼び出して、返ってきたデータを表示したいです。
しかし、ブラウザ表示の際にCORSのエラーが発生して表示ができないです。
エミュレーターでは問題なく表示されます。

発生している問題・エラーメッセージ

/awsapi/web/#/:1 Access to XMLHttpRequest at 'https://... from origin 'https://hoge.jp’ has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

aaaa.execute-api.ap-northeast-1.amazonaws.com/default/bbb:1          Failed to load resource: net::ERR_FAILED

試したこと

AWSのAPI GATEWAYのCORSの設定を変更。

Comments

[ockeghem]

> AWSのAPI GATEWAYのCORSの設定を変更。

変更前と変更後を具体的に示してください。

[yah58]

Access-Control-Allow-Originに、エラーに記載されている「from origin 'https://hoge.jp’ has been blocked by CORS policy: ・・・」の”https://hoge.jp”を追加しました

[ockeghem]

それを具体的に示して欲しいと言っています。ソースコードや画面キャプチャ等で示してください。

Answer 1

プリフライトリクエストで失敗しています。プリフライトリクエストにはOPTIONSメソッドが使用されますが、許可されていますか？

CORSの設定内容が書かれていないので推測になりますが、このあたりでしょうか。

• API が、必要な CORS ヘッダーを返す OPTIONS メソッドで設定されていない。
• 許可されたドメインは、Access-Control-Allow-Origin ヘッダー値にリストとして含まれている必要があります。

API Gateway からの CORS エラーのトラブルシューティング

参考リンクを貼っておきます。

Preflight request (プリフライトリクエスト) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN

これは OPTIONS リクエストであり、 Access-Control-Request-Method,Access-Control-Request-Headers, Origin の 3 つの HTTP リクエストヘッダー使用します。