API Gateway CORS:「Access-Control-Allow-Origin」ヘッダーなし

103
Tyler 2016-02-04 14:51.

CORSはAPIGatewayを介して設定され、Access-Control-Allow-Originヘッダーが設定されていますが、Chrome内でAJAXからAPIを呼び出そうとすると、次のエラーが発生します。

XMLHttpRequestはhttp://XXXXX.execute-api.us-west-2.amazonaws.com/beta/YYYYYを読み込めません。要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません。したがって、オリジン 'null'はアクセスを許可されません。応答のHTTPステータスコードは403でした。

Postmanを介してURLを取得しようとしましたが、上記のヘッダーが正常に渡されたことが示されています。

そして、オプションの応答から:

JSON-Pに戻さずにブラウザからAPIを呼び出すにはどうすればよいですか?

16 answers

121
riseres 2017-03-27 02:56.

同じ問題が発生します。私は見つけるために10時間を使用しました。

https://serverless.com/framework/docs/providers/aws/events/apigateway/

// handler.js

'use strict';

module.exports.hello = function(event, context, callback) {

const response = {
  statusCode: 200,
  headers: {
    "Access-Control-Allow-Origin" : "*", // Required for CORS support to work
    "Access-Control-Allow-Credentials" : true // Required for cookies, authorization headers with HTTPS 
  },
  body: JSON.stringify({ "message": "Hello World!" })
};

callback(null, response);
};
105
Gabriel Doty 2018-02-19 20:46.

他の誰かがまだこれに遭遇している場合-私は私のアプリケーションの根本原因を突き止めることができました。

カスタムオーソライザーを使用してAPI-Gatewayを実行している場合-API-Gatewayは、実際にサーバーに到達する前に401または403を送り返します。デフォルト-カスタムオーソライザーから4xxを返す場合、API-GatewayはCORS用に構成されていません。

また、API Gatewayを介して実行されているリクエストのステータスコードを取得している場合、0または1リクエストから取得している場合は、おそらくこれが問題です。

修正するには(APIゲートウェイ構成で)「ゲートウェイ応答」に移動し、「デフォルト4XX」を展開して、そこにCORS構成ヘッダーを追加します。すなわち

Access-Control-Allow-Origin: '*'

ゲートウェイを再デプロイしてください-そして出来上がり!

19
Carlos Alberto Schneider 2017-04-07 10:12.

1) @riseresやその他の変更と同じことを行う必要がありました。これは、応答ヘッダーです。

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'
        }

2)そして

このドキュメントによると:

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

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

3)そして

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

16
lase 2018-12-04 08:22.

この問題に関するすべてを無駄に試した場合、私が行った場所に行き着くでしょう。結局のところ、Amazonの既存のCORSセットアップ手順は問題なく機能します...再デプロイすることを忘れないでください!CORS編集ウィザードは、小さな緑色のチェックマークがすべて付いていても、APIをライブで更新しません。おそらく明白ですが、それは私を半日困惑させました。

12
MannyC 2017-04-18 00:24.

私は:私のサンプルの作業手に入れただけで挿入された「アクセス制御-許可-起源」:「*」、内側の{}:ヘッダをラムダ関数nodejs生成に。Lambdaで生成されたAPIレイヤーに変更を加えませんでした

これが私のNodeJSです:

'use strict';
const doc = require('dynamodb-doc');
const dynamo = new doc.DynamoDB();
exports.handler = ( event, context, callback ) => {
    const done = ( err, res ) => callback( null, {
        statusCode: err ? '400' : '200',
        body: err ? err.message : JSON.stringify(res),
        headers:{ 'Access-Control-Allow-Origin' : '*' },
    });
    switch( event.httpMethod ) {
        ...
    }
};

これが私のAJAX呼び出しです

$.ajax({
    url: 'https://x.execute-api.x-x-x.amazonaws.com/prod/fnXx?TableName=x',
    type: 'GET',
    beforeSend: function(){ $( '#loader' ).show();},
    success: function( res ) { alert( JSON.stringify(res) ); },
    error:function(e){ alert('Lambda returned error\n\n' + e.responseText); },
    complete:function(){ $('#loader').hide(); }
});
8
theaws.blog 2019-11-28 18:27.

Google社員の場合:

理由は次のとおりです。

  • 単純なリクエスト、または、GET/ POSTCookieなしではプリフライトはトリガーされません
  • パスにCORSを設定すると、API GatewayはOPTIONSそのパスのメソッドのみを作成し、Allow-Originユーザーが呼び出したときに模擬応答を使用してヘッダーを送信しますがOPTIONSGET/POSTAllow-Origin自動的に取得されません
  • CORSモードをオンにして単純なリクエストを送信しようとすると、その応答にAllow-Originヘッダーがないため、エラーが発生します
  • ベストプラクティスに従うことができます。単純なリクエストはユーザーに応答を送信することを意図したものではなく、リクエストと一緒に認証/ Cookieを送信して「シンプルではない」ようにし、プリフライトがトリガーされます
  • それでも、次のリクエストでは、CORSヘッダーを自分で送信する必要があります OPTIONS

要約すると:

  • 無害なものだけがAPIGatewayOPTIONSによって自動的に生成されます
  • OPTIONSパス上のCORSの可能性をチェックするための予防措置としてブラウザでのみ使用されます
  • かどうかCORSをされ受け入れられた実際のメソッドなどに依存しますGET/POST
  • 応答で適切なヘッダーを手動で送信する必要があります
6
Vishal Shetty 2020-04-26 23:23.

ラムダ関数の応答にヘッダーを追加したところ、魅力のように機能しました

exports.handler = async (event) => {
    const response = {
        statusCode: 200,
        body: JSON.stringify('Hey it works'),
        headers:{ 'Access-Control-Allow-Origin' : '*' }
    };
    return response;
};
4
Ravi Ram 2019-06-08 08:53.

私は内に簡単な解決策を見つけました

APIゲートウェイ> APIエンドポイントを選択>メソッドを選択(私の場合はPOSTでした)

ドロップダウンアクション> CORSを有効にする..それを選択します。

次に、ドロップダウンアクションを再度選択します> APIをデプロイします(再デプロイします)

出来た !

3
RodP 2018-07-16 05:46.

ラムダオーソライザーが失敗し、何らかの理由でCORSエラーに変換されていることに気付いた後、私は仕事を始めました。私のオーソライザー(および最初に追加すべきいくつかのオーソライザーテスト)への簡単な修正とそれは機能しました。私にとっては、APIGatewayアクション「EnableCORS」が必要でした。これにより、APIに必要なすべてのヘッダーとその他の設定が追加されました。

3
Jason 2020-07-14 15:34.

私にとって、最終的に機能した答えは、Alex Rの答え(2番目に賛成)からのJamesShapiroからのコメントでした。そもそも、S3でホストされている静的Webページを取得して、ラムダを使用して連絡先ページを処理し、電子メールを送信しようとして、このAPIGatewayの問題に直面しました。[]デフォルトの4XXをチェックするだけで、エラーメッセージが修正されました。

2
Ankit Kumar Rajpoot 2020-01-03 23:13.

関数またはコードを変更した後次の2つの手順に従います。

最初にCORSを有効にし、次に毎回APIをデプロイします

2
Ziaur Rahman 2020-01-14 02:19.

両方POSTでCORSを有効にした後でコードをデプロイし、OPTIONS私のために働きました。

1
James L. 2018-12-07 14:34.

私は実行していますがaws-serverless-express、私の場合は編集する必要がありますsimple-proxy-api.yaml

CORSがに設定される前https://example.comに、サイトの名前を入れ替えて、を介して再デプロイしたところnpm run setup、既存のラムダ/スタックが更新されました。

#...
/:
#...
method.response.header.Access-Control-Allow-Origin: "'https://example.com'"
#...
/{proxy+}:
method.response.header.Access-Control-Allow-Origin: "'https://example.com'"
#...
1
CamHart 2019-04-21 23:31.

私の場合、API Gatewayの承認メソッドとしてAWS_IAMを使用していたため、エンドポイントにアクセスするためのIAMロール権限を付与する必要がありました。

0
Michael Seibt 2019-05-17 23:59.

この問題のもう1つの根本的な原因は、HTTP /1.1とHTTP / 2の違いである可能性があります。

症状:すべてではない一部のユーザーが、ソフトウェアの使用時にCORSエラーを受け取ると報告しました。

問題:Access-Control-Allow-Originヘッダが欠落していました、時々

コンテキスト:ホワイトリストへの照合OPTIONSなど、リクエストの処理と対応するCORSヘッダーでの返信専用のLambdaを配置しました。Access-Control-Allow-OriginOrigin

解決策: API Gatewayは、HTTP / 2呼び出しの場合、すべてのヘッダーを小文字に変換するようですが、HTTP /1.1の場合は大文字を維持します。これにより、アクセスevent.headers.originが失敗しました。

この問題も発生しているかどうかを確認してください。

APIがにhttps://api.example.comあり、フロントエンドがにあると仮定しますhttps://www.example.com。CURLを使用して、HTTP / 2を使用してリクエストを行います。

curl -v -X OPTIONS -H 'Origin: https://www.example.com' https://api.example.com

応答出力にはヘッダーを含める必要があります。

< Access-Control-Allow-Origin: https://www.example.com

HTTP / 1.1を使用して(または小文字のOriginヘッダーを使用して)同じ手順を繰り返します。

curl -v -X OPTIONS --http1.1 -H 'Origin: https://www.example.com' https://api.example.com

Access-Control-Allow-Originヘッダーが欠落している場合は、ヘッダーを読み取るときに大文字と小文字の区別を確認することをお勧めしますOrigin

0
Nigel Atkinson 2019-10-30 16:25.

他のコメントに加えて、注意すべき点は、基礎となる統合から返されるステータスと、そのステータスに対してAccess-Control-Allow-Originヘッダーが返されるかどうかです。

'Enable CORS'を実行すると、200ステータスしか設定されません。エンドポイントに他のユーザー(4xxや5xxなど)がある場合は、ヘッダーを自分で追加する必要があります。

Related questions

MORE COOL STUFF

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは、夫に会ったとき、典型的な交際のアドバイスに逆らいました。

マイケルシーンが非営利の俳優である理由

マイケルシーンが非営利の俳優である理由

マイケルシーンは非営利の俳優ですが、それは正確にはどういう意味ですか?

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

特徴的なスターのコリン・エッグレスフィールドは、RomaDrama Liveでのスリル満点のファンとの出会いについて料理しました!加えて、大会での彼のINSPIREプログラム。

「たどりつけば」をオンラインでストリーミングできない理由

「たどりつけば」をオンラインでストリーミングできない理由

ノーザンエクスポージャーが90年代の最も人気のある番組の1つになった理由を確認するには、Blu-rayまたはDVDプレーヤーをほこりで払う必要があります。

バイオニック読書はあなたをより速く読むことができますか?

バイオニック読書はあなたをより速く読むことができますか?

BionicReadingアプリの人気が爆発的に高まっています。しかし、それは本当にあなたを速読術にすることができますか?

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖は、世界で2番目に大きいボイリング湖です。そこにたどり着くまでのトレッキングは大変で長いですが、努力する価値は十分にあります。

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

サロンからのヘアトリミングや個人的な寄付は、油流出を吸収して環境を保護するのに役立つマットとして再利用できます。

ホワイトハウスの最も記憶に残る結婚式を見てください

ホワイトハウスの最も記憶に残る結婚式を見てください

過去200年以上の間にホワイトハウスで結婚したのはほんの数人です。彼らは誰でしたか、そしてそこで結婚式を獲得するために何が必要ですか?

ねえNFL、ジョーバロウとカイラーマレーは女性の権利をサポートするために少しの助けを使うことができます

ねえNFL、ジョーバロウとカイラーマレーは女性の権利をサポートするために少しの助けを使うことができます

ジョー・バロウロー対ウェイド事件の転覆に対応するNFLは、言葉を言わないことで、腹立たしいが予測可能なPRの結果でした。

別の日、別のヒンジのないLIV記者会見

別の日、別のヒンジのないLIV記者会見

(lから)パット・ペレス、ブルックス・ケプカ、パトリック・リードサウジアラビアのLIVゴルフリーグのさらに別の信じられないほどの記者会見で、スポーツのファンはブルックス・ケプカからでたらめな吐き気と質問回避の驚異的なマスタークラスを受けました。パトリックリード、ブライソンデシャンボー、パットペレス、最近のPGAツアーの脱北者。

ミズ・マーベルの家族の帰郷は悪役よりも激しく打撃を与える

ミズ・マーベルの家族の帰郷は悪役よりも激しく打撃を与える

レッドダガーとマーベルさんがチームを組んでいます。

6億7500万ドルのビットコインローンのデフォルト後にすべての資産を清算するように命じられたスリーアローズキャピタル

6億7500万ドルのビットコインローンのデフォルト後にすべての資産を清算するように命じられたスリーアローズキャピタル

暗号業界最大の沈没船の1つであるスリーアローズキャピタルは、ついにその悲惨さから解放されています。火曜日に、不良債権ヘッジファンドは、債権者からの返済を要求する訴訟の高まりに応えて、バージンアイランド裁判所によって清算を命じられました彼らが3ACに行ったローン。

Zendaya Wishes Boyfriend Tom Holland Happy Birthday with Cuddly Photo: He 'Makes Me the Happiest'

Zendaya Wishes Boyfriend Tom Holland Happy Birthday with Cuddly Photo: He 'Makes Me the Happiest'

Zendaya shared a sweet photo in honor of boyfriend Tom Holland's 26th birthday Wednesday

小さな女性:脳卒中を患った後に病院から解放されたアトランタのジューシーな赤ちゃん:「まだ癒し」

小さな女性:脳卒中を患った後に病院から解放されたアトランタのジューシーな赤ちゃん:「まだ癒し」

シーレン「Ms.JuicyBaby」ピアソンは、先月脳卒中で入院した後、「もう一度たくさんのことをする方法を学ばなければならない」ため、言語療法を受けていることを明らかにしました。

エマストーンは彼女のクリフサイドマリブビーチハウスを420万ドルでリストアップしています—中を見てください!

エマストーンは彼女のクリフサイドマリブビーチハウスを420万ドルでリストアップしています—中を見てください!

オスカー受賞者の世紀半ばの家には、3つのベッドルーム、2つのバス、オーシャンフロントの景色があります。

ジーニー・メイ・ジェンキンスは、母乳育児の経験の中で、彼女は「本当に、本当に落ち込んでいる」と言います

ジーニー・メイ・ジェンキンスは、母乳育児の経験の中で、彼女は「本当に、本当に落ち込んでいる」と言います

ジーニー・メイ・ジェンキンスは、生後4か月の娘、モナコに母乳育児をしていると語った。

Suffragettes Indicam #3: Junho

Suffragettes Indicam #3: Junho

Mais um mês se findando — e metade do ano de 2022 já passou. Sabe o que isso significa? Não, não é hora de verificar se você está cumprindo com suas resoluções de Ano Novo.

多元宇宙—Junø

多元宇宙—Junø

チェーン間アカウントがJunoに登場します。異なるブロックチェーン間でスマートコントラクトの構成可能性と真の相互運用性を提供します。

#brand【ベター・コール・ソール!アメリカのテレビシリーズ「ブレイキング・バッド」に最高のビジネス例が隠されている】・・・ルールクリエイティブ

#brand【ベター・コール・ソール!アメリカのテレビシリーズ「ブレイキング・バッド」に最高のビジネス例が隠されている】・・・ルールクリエイティブ

1.ドラマを見た後、起業する考えはありますか?あなたのビジネスはボトルネックに遭遇しましたか?方向性がなくてわからない場合は、ドラマを追いかけて行くことを心からお勧めします。(?)ブラフではなく、最も完璧なビジネス例を隠すドラマがあります。2.ブレイキング・バッドとその弁護士ドラマ「ブレイキング・バッド」を見た友人たちは、演劇の中で、穏やかな表情で、弁護士のソウル・グッドマンに深く感銘を受けなければなりません。口を開けて、感覚の弱い傭兵の性格を持っています。道徳の面で、サル・グッドマンは無意識のうちに劇に欠かせない役割を果たし、彼自身のシリーズ「絶望的な弁護士」(ベター・コール・ソール)を生み出しました。ウェントウのテキストとビデオは、劇中のソウル・グッドマンのテレビコマーシャルです。製品(サービス)、競争戦略、市場ポジショニング、ブランド名、ターゲット顧客グループ、コミュニケーション軸から広告まで、サル・グッドマンの役割のビジネス設定は、「最低」と見なすことができる超超超超超超完全です。ブランドコミュニケーションのコスト」「変化」のモデル。なぜ?私の分析をご覧ください。3.ソウル・グッドマンの「事業戦略」1.基本情報ブランド名:Saul Goodman製品:法律相談サービス対象顧客:麻薬中毒、飲酒運転、事故など。法律知識の欠如は、一般的に公立弁護士にしか余裕がなく、真面目な弁護士も「特別な法律を持つ消費者」を避けます。恐れてはいけない「​​ニーズ」。コミュニケーションの主軸:この国のすべての男性、女性、子供は有罪判決を受けるまで無実だと思います。地域:アルバカーキ市スローガン:Thrallに電話したほうがいいです!(ベター・コール・ソール)広告:2つの可能性のある犯罪状況をシミュレートします+サウルの主張+サウルのスローガン2をより適切に呼び出します。

メインネットガイド— Arbitrum Odyssey Week 2

メインネットガイド— Arbitrum Odyssey Week 2

最新のアップデートを受け取るために私たちに従ってください。ニュースレター:https://www。

Language