Symfoware

Symfowareについての考察blog

AWS API GatewayをjQuery $.ajaxで呼び出し時に「No 'Access-Control-Allow-Origin' header is present on the requested resource.」

API GatewayでLambdaの関数を公開しました。
AWS API Gateway経由でLambda(Java)を呼び出す

jQueryから呼び出してみます。


サンプル



ボタンを押すとapiにデータをpost。
結果を表示する簡単なサンプルです。


  1. <html lang="ja">
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>sample</title>
  5. </head>
  6. <body>
  7.     <h3>api gateway</h3>
  8.     <button id="run">実行</button>
  9.     <div id="result"></div>
  10. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  11. <script>
  12. $(function() {
  13.     $('#run').on('click', function() {
  14.         $.ajax({
  15.             type:'POST',
  16.             url:'https://example.execute-api.ap-northeast-1.amazonaws.com/dev/hello',
  17.             data:JSON.stringify({
  18.                 firstName: 'jQuery',
  19.                 lastName: 'call'
  20.                 })
  21.         }).done(json => {
  22.             $('#result').html(json['greetings']);
  23.         });
  24.     });
  25. })
  26. </script>
  27. </body>



ボタンを押してみると、Consoleにエラーが表示されます。


No 'Access-Control-Allow-Origin' header is present on the requested resource.





CORSの有効化



そういえば、API Gatewayの設定に「CORSの有効化」という項目がありました。
リソースを選択して、「アクション」の「CORSの有効化」を選択。

889_01.png

「CORSを有効にして既存のCORSヘッダーを置換」をクリック。

889_02.png

確認ダイアログが表示されます。
「はい、既存の値を置き換えます」をクリック。

889_03.png

有効化されました。

889_04.png


これで動くだろうと思ったら、エラーが解消されません。
なぜだ?




APIのデプロイ



設定を変更しても、デプロイするまで反映されません。
「アクション」から「APIのデプロイ」を選択。

889_05.png

公開中の「dev」を更新します。

889_06.png

これで動いてくれました。

889_07.png



その他の注意点



他にハマったポイントとして、


  1. <html lang="ja">
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>sample</title>
  5. </head>
  6. <body>
  7.     <h3>api gateway</h3>
  8.     <button id="run">実行</button>
  9.     <div id="result"></div>
  10. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  11. <script>
  12. $(function() {
  13.     $('#run').on('click', function() {
  14.         $.ajax({
  15.             type:'POST',
  16.             url:'https://example.execute-api.ap-northeast-1.amazonaws.com/dev/hello',
  17.             data:{
  18.                 firstName: 'jQuery',
  19.                 lastName: 'call'
  20.             }
  21.         }).done(json => {
  22.             $('#result').html(json['greetings']);
  23.         });
  24.     });
  25. })
  26. </script>
  27. </body>



このように、dataをJSON.stringifyせずに送信した場合や、


  1. <html lang="ja">
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>sample</title>
  5. </head>
  6. <body>
  7.     <h3>api gateway</h3>
  8.     <button id="run">実行</button>
  9.     <div id="result"></div>
  10. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  11. <script>
  12. $(function() {
  13.     $('#run').on('click', function() {
  14.         $.ajax({
  15.             type:'POST',
  16.             url:'https://example.execute-api.ap-northeast-1.amazonaws.com/dev/bad_resource',
  17.             data:JSON.stringify({
  18.                 firstName: 'jQuery',
  19.                 lastName: 'call'
  20.             })
  21.         }).done(json => {
  22.             $('#result').html(json['greetings']);
  23.         });
  24.     });
  25. })
  26. </script>
  27. </body>



このように、リソース名の指定が誤っている場合も「Access-Control-Allow-Origin」エラーが表示されました。
※下の例の場合は、ステータスコードは403になる。

関連記事

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2018/05/23(水) 00:43:33|
  2. Java
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
<<wkhtmltopdfでhtmlをpdfに変換 | ホーム | AWS API Gateway経由でLambda(Java)を呼び出す>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
https://symfoware.blog.fc2.com/tb.php/2189-6c66c78c
この記事にトラックバックする(FC2ブログユーザー)