8

AWS API Gateway を Angular.js フロントエンドと連携させた人はいますか? API Gateway の POST メソッドを介して公開されるラムダ関数があります。このドキュメントで示されているようにヘッダーを設定しました: http://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html

Postman でテストしたところ、うまくいきました。特別なことをする必要はありませんでしたが、$http.post()呼び出しを行うNo 'Access-Control-Allow-Origin'と、要求されたリソースにヘッダーが存在するだけです。したがって、オリジンhttp://localhost:9000へのアクセスは許可されません。応答は応答HTTP status code 500.として持っていました。

4

5 に答える 5

7

私は現在、CORS を使用して Angular クライアントからアクセスされる API Gateway と Lambda を介して動作する POST 関数を持っています。あなたの設定がどのようなものかはわかりませんが、見落としていたものが見つかることを願って、関連するすべての設定を共有できます。CORS を有効にすることは、現時点では非常に面倒です (Amazon が修正に取り組んでいることを願っています)。

リソースには 2 つのメソッド (OPTIONS と POST) があり、それぞれに関連する設定を共有します。

POST:
メソッド リクエスト: 特別なことはありません。私のエンドポイントの場合、ルート パラメーターの 1 つに対して [リクエスト パス] の下にオプションがあります。クエリ文字列を使用していないため、URL クエリ文字列は空です。HTTP リクエスト ヘッダーも空です。

統合リクエスト:
統合タイプ: ラムダ マッピング テンプレート: リクエスト本文から適切な値を渡し、パラメータをラムダ関数にルーティングするためのテンプレートを含む 1 つ (アプリケーション/json) があります。

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

統合応答:
200 応答ステータス フィールドを展開します。[ヘッダー マッピング] で、マッピング値を変更して「*」を含めます。一重引用符が必要です。他の統合応答に対してこれを行う必要がある場合があります。

オプション:
メソッド リクエスト:
POST メソッドのように、特別なことは何もありません。

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

メソッドの応答:
200 ステータス コード フィールドを展開します。次の 3 つの応答ヘッダーを追加し、チェック ボックスを付けて保存します: Access-Control-Allow-Headers、Access-Control-Allow-Methods、Access-Control-Allow-Origin。他のステータス コードはありません。

統合応答:
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 値が欠落していたことは確かです。

于 2015-11-03T03:01:37.457 に答える
0

「要求されたリソースに 'Access-Control-Allow-Origin' ヘッダーが存在しません」というエラーが表示されるためです。Angular から API を呼び出そうとすると、Amazon ドキュメントに従ったときに設定された Access-Control-Allow-Origin ヘッダーが取得されないように思えます。

まず、API の正しい URL を呼び出していることを再確認します。Amazon はこれをステージ画面に表示しますが、表示される URL にステージ名を追加する必要があります。したがって、「prod」ステージにデプロイして表示される場合

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

電話する必要があります

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

次に、郵便配達員から API の OPTIONS メソッドを呼び出してみます。POST メソッドを OPTIONS に変更して API を呼び出した後、Postman の結果セクションでヘッダーを確認します。そこに次のものが表示されます。

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

レスポンスでそれらを確認できない場合は、API の OPTIONS メソッドの下にあるメソッド レスポンスを再確認してください。これらのヘッダーが 200 応答用に追加されていることを確認してください。

最後の結果として、Amazon が最近追加した [CORS を有効にする] ボタンを使用してみることができます。左側のツリー ビューでリソースを選択し、右上にある [CORS を有効にする] ボタンを探します。それをクリックすると、AWS はすべての CORS 関連のメソッドを再作成します。

これらの手順のいくつかが役立つことを願っています!

于 2015-11-21T16:14:28.757 に答える