web-dev-qa-db-ja.com

AWS API Gatewayエンドポイントは、POST S3の静的サイトから

Serverless（serverless.com）を使用してAPIエンドポイントを作成し、API Gatewayを介して公開します。からCORSを有効にしましたが、次のエラーが表示されます

XMLHttpRequestをロードできません https://xxxxxxxxx.execute-api.us-west-2.amazonaws.com/development/signup 。要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません。オリジン ' http://yyyyyyyyy.com.s3-website-us-east-1.amazonaws.com 'はアクセスが許可されていません。

AWS API Gateway settings for the endpoint

Originヘッダーを設定しているかどうかにかかわらず、Postmanを使用して要求を行うときにエラーは発生しません。この問題を修正するにはどうすればよいですか？

amazon-s3corsaws-api-gateway
16
Milindu Sanoj Kumarage

API Gatewayへの失敗したリクエストに適切なCORSヘッダーが含まれず、リクエストの実際のエラーがマスクされるというバグがあります。

ケンが言ったことに加えて、Postmanまたはブラウザではない他のクライアントを使用して、コンソールおよびデプロイされたバージョンでAPIとリソースを徹底的にテストしたことを確認します。 API自体に問題があり、CORS設定が正しいことを期待しています。

13
Jack Kohn - AWS

Jack Kohnが指摘したように、AWSコンソールは200以外の応答にCORSヘッダーを追加せず、明らかにカスタムヘッダーを追加することも許可していません。

Swaggerにエクスポートして手動でファイルを編集し（200の応答をコピーしただけ）、インポートして戻すことで、失敗した要求でCORSヘッダーを有効にすることができました。

応答は次のようになります。

  responses:
    200:
      description: "200 response"
      schema:
        $ref: "#/definitions/Empty"
      headers:
        Access-Control-Allow-Origin:
          type: "string"
    401:
      description: "401 response"
      schema:
        $ref: "#/definitions/Empty"
      headers:
        Access-Control-Allow-Origin:
          type: "string"
  x-Amazon-apigateway-integration:
    responses:
      default:
        statusCode: "200"
        responseParameters:
          method.response.header.Access-Control-Allow-Origin: "'*'"
        responseTemplates:
          application/json: "__passthrough__"
      Authentication Failed.*:
        statusCode: "401"
        responseParameters:
          method.response.header.Access-Control-Allow-Origin: "'*'"
        responseTemplates:
          application/json: "__passthrough__"

お役に立てれば。

6
Tiago Lopo

AWSコンソールでAPIを調べて、サーバーレスですべてが期待どおりに登録されていることを確認して、トラブルシューティングを開始します。

  1. AWSコンソールをロードし、API Gatewayサービスに移動します。
  2. APIをクリックして開きます。
  3. / signupリソースを見つける
  4. / signupの下にOPTIONSメソッドが表示されていることを確認してください

  5. オプションを含む各リソースをクリックして、次を確認します。

    a。 [統合応答]をクリックし、テーブルの最初の行にある200の矢印をクリックして開きます。

    b。矢印をクリックしてヘッダーマッピングを開きます

    c。 Access-Control-Allow-Originが「*」にマッピングされていることを確認してください

メソッドの1つでこのヘッダーが見つからない場合は、/ signupリソースをクリックして[CORSを有効にする]ボタンをクリックしてください。 AWSは、オプションとすべてのメソッドのヘッダーマッピングを作成します。もちろん、サーバーレスがあなたのために物事をセットアップしなかった理由を理解する必要がありますが、これは少なくともあなたを軌道に乗せるでしょう。

[CORSを有効にする]ボタンに関する別の注意点。後で別のメソッドを追加する場合は、もう一度クリックしてツールを再実行し、CORSを使用して新しいメソッドを設定する必要があります。

3
kennbrodhagen

私はこの問題を抱えています...私はCORSを有効にし、テストはヘッダーを送信しているように動作しますが、アプリから呼び出すと失敗し、応答にヘッダーが見つかりませんでした。

これは、CORSを設定した後、APIを展開する必要があるためです。 APIを導入しましたが、すべてうまくいきます。

2
Cristian Sepulveda

API Gatewayに「POST」するときに、同じ問題に苦労していました。しかし、私は問題の修正を見つけました。

メソッドリソースのCORSを有効にし、必要なヘッダーを追加した後'Access-Control-Allow-Origin' = '*'ワイルドカード、およびそれでも失敗します。

呼び出しているリソースのオプション、「GET」、「POST」などに移動します。そのリソースの「メソッド要求」ペインをクリックし、APIキーをFALSEに設定し、APIキーをtrueに設定しないでください。これにより、CORSエラーが発生します。

理由は、OPTIONSは技術的にはメソッドではなく、プリフライトリクエストを実行するためのブラウザ機能です。したがって、プリフライト中はブラウザは送信するAPIキーを知らず、応答がブラウザに返された後にのみ認識します-Control-Allow-Origin '=' * 'の場合、X-Api-Key =何らかの値のsetHeadersへのHTTPリクエストのコードを検索します。

注：invokeメソッド自体、「POST」などでは、API Key = Trueを使用できますが、これはまったく問題ありません。

これが私がしばらくの間やったように苦労している人々を助けることを願っています:)

2
Michael Tung

すべてのメソッドでCORSを有効にする必要があります。つまり、すべてのメソッドに3つのヘッダーを追加する必要があります

            "headers": {
            "Access-Control-Allow-Origin": {
                "type": "string"
            },
            "Access-Control-Allow-Methods": {
                "type": "string"
            },
            "Access-Control-Allow-Headers": {
                "type": "string"
            }
        }

JSONのすべてのメソッドにこれらのヘッダーを追加するのは退屈な作業です。

これらのヘッダーをSwagger JSONに自動的に追加するユーティリティをJavaで作成しました。APIGatewayにインポートする前に実行し、すべてのメソッドでCORSが有効になっている出力JSONをインポートできます。

https://github.com/anandlalvb/SwaggerToAPIGateway

このユーティリティが、これを探している人なら誰でも簡単にできることを願っています。

0
binary

応答には、AWS lambdaを使用している場合、次のように応答ヘッダーを設定する必要があります。 API Gatewayのみの設定は機能しません

headers: {
            'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*',
        },
0
PRP

オンライン検索にしばらく時間を費やした後、このスレッドにつまずいたので、アップロードにAWS SDKを使用しています。 @lsimoneau 45581857 のおかげで、まったく同じことが起こっていたことがわかりました。 regionプロパティを添付することで、リクエストUrlをバケットのリージョンにポイントするだけで機能しました。

 const s3 = new AWS.S3({
 accessKeyId: config.awsAccessKeyID,
 secretAccessKey: config.awsSecretAccessKey,
 region: 'eu-west-2'  // add region here });
0
davyCode

別の質問で投稿したように、私は同じ問題に近かったので、応答に次のヘッダーを追加する必要がありました。

headers: {
            'Access-Control-Allow-Origin' : '*',
            'Access-Control-Allow-Headers':'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token',
            'Access-Control-Allow-Credentials' : true,
            'Content-Type': 'application/json'
        }

そして、このドキュメントによると：

http://docs.aws.Amazon.com/apigateway/latest/developerguide/how-to-cors.html

API Gateway構成でラムダ関数のプロキシを使用する場合、postまたはgetメソッドにはヘッダーが追加されず、optionsメソッドのみが追加されます。応答（サーバーまたはラムダ応答）で手動で行う必要があります。

それに加えて、APIゲートウェイのpostメソッドで「API Key Required」オプションを無効にする必要がありました。

0
Carlos Alberto Schneider