web-dev-qa-db-ja.com

AWS API Gateway 'Access-Control-Allow-Origin'ヘッダーがありません

私はAPIゲートウェイの問題にこだわっており、これに関する他のすべてのSOの回答、AWSフォーラムを通過しました。

DynamoDBのテーブルの読み取り/書き込みを行うLambda関数を呼び出すAWS APIゲートウェイを使用して、APIをセットアップしようとしています。

DynamoDBのLambda関数は機能しています。 AWSでAPIを作成し、そのためのGETおよびOPTIONSメソッドを作成しました。 AWSはGET/POSTに対してのみOPTIONSを強制しませんが、OPTIONSメソッドがないときにajax呼び出しでプリフライトエラーが発生するので、追加しました。

とりあえず進歩させるために、APIキーまたは認証を使用していません。 DynamoDBテーブルのコンテンツを返すPOSTMANを使用して、GETメソッドを正常に呼び出すことができます。

しかし、JQuery ajax呼び出しを使用しようとすると、

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

ネットワークタブでChrome devツールを使用し、OPTIONSメソッドがステータス200を返し、GETがステータス200を返しますが、上記のエラーが表示されます。

OPTIONSとGETの両方のメソッドでCORSを有効にしてみました。変更するたびにAPIを再デプロイし、次のことを試しました（ http://enable-cors.org/server_awsapigateway.html ）コンソールで常に同じエラーが発生します。

デスクトップ上のファイルからajax呼び出しを実行しているため、ページがJSの単一のWebページアプリケーションとしてS3にデプロイされるため、Originはnullです。

GETおよびOPTIONSでCORSを有効にすると、Access-Control-Allow-Headersが'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token'およびAccess-Control-Allow-Origin *は'*'

私のAjax呼び出しは以下のようになります。また、POSTMANが使用する正確なヘッダーをコピーしようとしました。このヘッダーにはAuthorizationヘッダーが設定されています（今のところAWSでオフにしています）が、上記と同じエラーが常に発生します

var awsHeaders = {};
awsHeaders['X-Amz-Date'] = '20161127T171734';

$('#add, #cloud').click(function() {

    $.ajax({

        type: 'GET',
        headers: awsHeaders,
        dataType : "json",
        url: '...',
        success: function (res) {

            console.log('response in GET:');
            console.log(res);

        },
        error: function(data) {
            console.log('in error');
            console.log(data);
        }

    });

});

誰かが私が欠けているかもしれないものに光を当てることができますか？

どうもありがとう

UpdateDigitalKapteainコメントごとにこれをどのように解決したかについては、以下の回答を参照してください-'Access-Control-Allow-Origin'： '*'ヘッダーをLambda関数からの応答。 AWSドキュメントでこれを探しましたが、見つかりませんでした。このリンクでは、LambdaとLambdaプロキシの違いについて説明し、CORSを使用する場合の対処方法を説明します https://serverless.com/framework/docs/providers/aws/events/apigateway/

jqueryajaxamazon-web-servicesaws-lambdaaws-api-gateway
25
user12345

Lambda関数へのGETリクエストに対する応答には、Access-Control-Allow-Originヘッダ。

52
Digitalkapitaen

Digitalkapitaenの答えは正しいです。誰かが検索の手間を省くためのコードを次に示します LambdaでHTTP応答ヘッダーを設定する方法 ：

exports.handler = function(event, context, callback) {
    callback(null, {
        "statusCode": 200,
        "headers": { 
            "Access-Control-Allow-Origin": "*" 
        }
    });
};
24
Words Like Jared

それでもうまくいかない場合は、$。ajaxを使用している場合はJSONオブジェクトをJSON.stringify（）してください。そうでない場合でも、CORS関連のエラーであると主張するエラーが返されます。ただし、Postmanを使用して同じjsonオブジェクトを送信すると、リクエストは成功します。やってみて...

5
rickfarina

Flaskで@Digitalkapitaenのソリューションを統合することを考えている人のために、以下のコードを示します。

app = Flask(__name__)
cors = CORS(app, resources={r"/*": {"origins": "*"}})

@app.route("/")
def helloWorld():
  return "Hello, cross-Origin-world!"

以下を実行して、flask-corsモジュールをインストールします。

pip install -U flask-cors
0
captainblack