web-dev-qa-db-ja.com

Lambdaプロキシ用のAWSAPIGatewayCORSは適用されません

POST LambdaProxyメソッドとCORSヘッダー用のOPTIONSメソッドを使用してAPIGatewayリソースを設定しました。

OPTIONSメソッドは、次のヘッダーを返します。

$ curl -i -X OPTIONS https://xxxxxxxxx.execute-api.eu-central-1.amazonaws.com/dev/endpoint1

HTTP/1.1 200 OK
Content-Type: application/json
Content-Length: 0
Connection: keep-alive
Date: Sat, 18 Feb 2017 17:07:17 GMT
x-amzn-RequestId: xxxx
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token
Access-Control-Allow-Methods: POST,OPTIONS
X-Cache: Miss from cloudfront
Via: 1.1 xxxx.cloudfront.net (CloudFront)
X-Amz-Cf-Id: xxxx==

しかし、生成されたJavascriptSDKを使用してPOSTエンドポイントを呼び出すと、Chromeブラウザーコンソールに次のエラーが表示されます：

XMLHttpRequest cannot load https://xxxx.execute-api.eu-central-1.amazonaws.com/dev/endpoint1.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost:8080' is therefore not allowed access.

firefoxと同様に：

Cross-Origin Request Blocked: 
The Same Origin Policy disallows reading the remote resource at https://xxxx.execute-api.eu-central-1.amazonaws.com/dev/endpoint1.
(Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

CORSヘッダーが考慮されないのはなぜですか？ POSTメソッド設定の追加の変更が必要ですか？

javascriptamazon-web-servicesaws-lambdaaws-api-gateway
10
Appleshell

ラムダ関数でヘッダーを手動で追加する必要があるようです。

NodeJSの場合、スクリプトは次のようになります。

context.succeed({
    "statusCode": 200,
    "headers": {
        "X-Requested-With": '*',
        "Access-Control-Allow-Headers": 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,x-requested-with',
        "Access-Control-Allow-Origin": '*',
        "Access-Control-Allow-Methods": 'POST,GET,OPTIONS'
    },
    "body": JSON.stringify(response)
})
14
Appleshell

より良いアプローチは、API Gatewayを使用して、ラムダからのペイロードをCORS関連のヘッダーで強化することです。 https://kennbrodhagen.net/2015/12/02/how-to-access-http -headers-using-aws-api-gateway-and-lambda /

これは、はるかにスケーラブルでエラーが発生しにくいアプローチです。

2
JTango18

以下の点をご確認ください。

  1. 更新されたAPIをデプロイしましたか？
  2. APIリソースのOPTIONSメソッドを作成しましたか？
  3. 以下のように、OPTIONSメソッドのメソッド応答の応答ヘッダーを追加しましたか？
    • Access-Control-Allow-Headers
    • Access-Control-Allow-Methods
    • Access-Control-Allow-Origin
  4. APIリソースで「CORSを有効にする」アクションを実行しましたか？
  5. 上記の確認が完了したら、APIリソースのGET/POSTメソッドのメソッドリクエストを確認してください。おそらく、Access-Control-Allow-OriginHTTPヘッダーはAPIGatewayによって自動的に追加されました。

ありがとう、ダニエル

0
Daniel Jihoon Oh