AWS APIゲートウェイの角度が

Question

Angular.jsのフロントエンドで動作するAWS API Gatewayを入手した人はいますか？ APIゲートウェイのPOSTメソッドを介して公開されているラムダ関数があります。このdocによって示されるように、私は、ヘッダーを設定します。http://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html

私はポストマンでそれをテストし、それは素晴らしい作品。私は特別なことをする必要はありませんでしたが、私が$http.post()を呼び出すと、私はNo 'Access-Control-Allow-Origin'ヘッダーが要求されたリソース上に存在するだけです。したがって、Origin http://localhost:9000はアクセスできません。応答はHTTP status code 500.でした。

Answer 1

私は現在、CORSで角度クライアントからアクセスされるAPI Gatewayおよびラムダを経由して作業POST機能を持っています。私はあなたの設定が何であるかはわかりませんが、あなたが逃したかもしれないことを期待して、関連するすべての設定を共有することができます。 CORSを有効にすることは、現時点ではかなり苦痛であり（おそらく、Amazonが修正に取り組んでいることがあります）、多くの分野で多くの小さなステップを必要とし、ドキュメントは非常に貧弱です。

私は自分のリソースのための2つの方法（OPTIONSとPOST）を持っていると私はそれぞれに関連する設定を共有します：

POST：
メソッド要求：特別な何もありません。私のエンドポイントの場合は、自分のルートパラメータの1つにパスを要求するオプションがあります。私はクエリ文字列を使用していないので、URLクエリ文字列は空です。 HTTP要求ヘッダーも空です。

統合要求：
統合タイプ：ラムダ マッピング・テンプレート：私は私のラムダ関数へのリクエストボディとルートパラメーターの適切な値を渡すためにテンプレートと1（アプリケーション/ JSON）を持っています。

メソッドの応答：
は200のステータスコードフィールドを展開します。 「Access-Control-Allow-Origin」のヘッダーを追加し、チェックマークボタンをクリックして保存します。これは他のステータスコードに対して行う必要があります。

統合応答：
は200レスポンスステータスフィールドを展開します。ヘッダーマッピングで、マッピング値に '*'を含むように変更します。一重引用符は必須です。あなたが持っているかもしれない他の統合応答のためにこれをしなければならないかもしれません。

OPTIONS：
メソッド要求：ちょうどPOSTメソッドのような特別な
何も、。

統合リクエスト：
私はモック統合に設定しました。 Amazonによると、それは問題ではないので、実際に必要なのは適切なヘッダーを200に返すことだけです。マッピングテンプレートはありません。

メソッドの応答：
は200のステータスコードフィールドを展開します。次の3つの応答ヘッダーを追加し、チェックボックスを付けて保存します。アクセス制御許可ヘッダー、アクセス制御許可メソッド、アクセス制御許可許可元。その他のステータスコードはありません。

統合応答：
は200レスポンスステータスフィールドを展開します。正規表現は空です（デフォルトに設定されています）。このメソッドは200応答のみを持ちます。ヘッダーマッピングを展開し、ヘッダーを次のマッピング値に設定します。

Access-Control-Allow-Headers: 'Content-Type,X-Amz-Date,Authorization,X-Requested-With' 
Access-Control-Allow-Methods: 'GET,POST,OPTIONS'  
Access-Control-Allow-Origin: '*' 

マッピングテンプレートはありません。

次に、APIを展開します。うまくいけばCORS要求が可能になりました。あなたとまったく同じ問題が発生しました。問題がAccess-Control-Allow-HeadersのX-Requested-Withの値を忘れていたことはかなり確かです。

Answer 2

あなたのエラーは、「いいえ 『アクセス制御 - 許可 - 起源』ヘッダが要求されたリソース上に存在している。」と言うので、 AngularからAPIを呼び出そうとすると、Amazonのドキュメントに従ったときに設定されたAccess-Control-Allow-Originヘッダーが取得されないように思えます。

まず、私はあなたがAPIのための右のURLを呼び出していることをダブルチェックします。 Amazonはこれをステージ画面に表示しますが、あなたが表示するURLにステージ名を追加する必要があります。あなたは「PROD」舞台に展開し、彼らはあなたが

https://xyz.execute-api.us-west-2.amazonaws.com/my-api/prod 

次を呼び出す必要が

https://xyz.execute-api.us-west-2.amazonaws.com/my-api 

を表示するのであれば、私は郵便配達からあなたのAPIにOPTIONSメソッドを呼び出すしようとするだろう。 POSTメソッドをOPTIONSに変更してAPIを呼び出したら、Postmanの結果セクションのヘッダーを確認します。

Access-Control-Allow-Methods → POST,OPTIONS 
Access-Control-Allow-Origin → * 

あなたが応答でそれらを見ることができない場合は、二重のは、あなたのAPIでOPTIONSメソッドの下にメソッドのレスポンスをチェック：あなたはそこに次のように見てみたいです。これらのヘッダーが200応答用に追加されていることを確認してください。あなたはAmazonが最近追加「CORSを有効にする」ボタンを使用して試すことができ、最後の結果

。左側のツリービューで自分のリソースを選択し、右上の "Enable CORS"ボタンを探します。これをクリックすると、AWSはすべてのCORS関連のメソッドを再作成します。

は、私はこれらのステップのいくつかは助けを願って！

Answer 3

Apiゲートウェイチームはこちら。

これで、コンソールで新しい「Enable CORS」機能をチェックしたことがあります。デベロッパーのワークフローがコンソールの外にあっても、テストAPIをすばやく設定して、コンソールが設定したヘッダーの設定を確認し、それらをあなたのSwaggerデフまたはあなたが思い付いたソリューションにコピーすることができます。

ドキュメントガイドは、まだどちらの場合にも適用されるべきです。 Access-Control-Allow-Methods、Access-Control-Allow-Origin、Access-Control-Allow-Headersの3つのヘッダーが必要です。これらの値はAPIによって異なります。

あなたが呼び出しようとしているAPIリソースを私に送信したい場合は、私たちの側から見てください。