質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

1回答

2699閲覧

「各リクエストに適切な CORS Accept ヘッダーを設定する必要がある」の意味が分かる方、教えてくださいm(_ _)m

Fujimon_fn

総合スコア10

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

0クリップ

投稿2016/12/26 03:24

###やろうとしていること
Amazon APIGatewayで作成したAPIにAWS_IAMの認証をつけ、ブラウザからjavascriptで叩きたい。

###問題の文章

調べたところ、AWSのドキュメントに下記の記述がありました。

API Gateway で生成された SDK を AWS 認証情報で初期化するには、次のようなコードを使用します。AWS 認証情報を使用すると、API に対するすべてのリクエストに署名が付与されます。これは、各リクエストに適切な CORS Accept ヘッダーを設定する必要があることを意味します。

javascript

1var apigClient = apigClientFactory.newClient({ 2 accessKey: 'ACCESS_KEY', 3 secretKey: 'SECRET_KEY', 4});

API Gateway で生成した JavaScript SDK を使用する

これらのコードは実際に使っていますが、上記文中の**「各リクエストに適切な CORS Accept ヘッダーを設定する必要があることを意味します」**の意味がよくわかっていません。認証をAWS_IAMに変更した場合は、CORSのためのヘッダーに何か特殊な設定をしなければならないのでしょうか。ここが分かる方、教えてください!

###前提・実現したいこと
Amazon APIGatewayで作成したAPI:"https://xxxxxx.execute-api.ap-northeast-1.amazonaws.com/test/"へのPOSTを、AWS_IAMで認証しようとしています。当該APIは、APIGatewayによって作成したAPI用のSDK(for Javascript)を使ってブラウザから呼び出そうとしています。

###発生している問題・エラーメッセージ

当該APIをPOSTすると、下記のエラーメッセージが返ってきます。

XMLHttpRequest cannot load https://xxxxxx.execute-api.ap-northeast-1.amazonaws.com/test/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 403.

なお、下記の設定は完了しています。

  • 当該APIのCORS有効化を行いました。
  • 当該APIのPOSTメソッドの認証を「AWS_IAM」に変更しました。
  • 当該APIの実行を許可するロールを、作成したCognito Identity PoolのUnauthUserに割り当てました。
  • AWS.config.credentialでaccessKeyIdとsecretAccessKeyを取得し、apigClientの初期化を行いました。

これらの設定の内、当該APIのPOSTメソッドの認証を「AWS_IAM」→「なし」に戻すと、正常にAPIを呼び出すことが出来ています。

###該当のソースコード

javascript

1var accessKeyId, secretAccessKey; 2var apigClient = apigClientFactory.newClient(); 3$(function(){ 4//Credentialの初期化 5 AWS.config.region = 'ap-northeast-1'; // Region 6 AWS.config.credentials = new AWS.CognitoIdentityCredentials({ 7 IdentityPoolId: 'ap-northeast-1:xxxxxxxxxxxxxxxxxxxxxxx', 8 }); 9 AWS.config.credentials.get(function(err){ 10 if(!err){ 11 apigClient = apigClientFactory.newClient({ 12 accessKey: AWS.config.credentials.accessKeyId, 13 secretKey: AWS.config.credentials.secretAccessKey 14 }); 15 }else{ 16 console.log(err); 17 } 18}); 19 20}); 21$('#btn').click(function(){ 22 console.log('Click'); 23 var body = { 24 TableName: 'TestTable', 25 Key: 'samplekey', 26 Attr1: 'testAttribute' 27 }; 28 apigClient.rootPost({}, body, {}) 29 .then(function(result){ 30 console.log(result); 31 }).catch( function(result){ 32 console.log(result); 33 }); 34});

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

サービスについては知らないので的外れだったらすいません。
開発者ガイドに"API Gateway リソースの CORS を有効にする"という項目があります。
http://docs.aws.amazon.com/ja_jp/apigateway/latest/developerguide/how-to-cors.html
通常XMLHttpRequestでは異なるドメインへのアクセスはできません。
リクエストを受ける側でCORSを許可するヘッダーを出力する必要があります。

投稿2016/12/26 15:53

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問