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

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

新規登録して質問してみよう
ただいま回答率
85.35%
AWS Lambda

AWS Lambdaは、クラウド上でアプリを実行できるコンピューティングサービス。サーバーのプロビジョニングや管理を要せず複数のイベントに対してコードを実行します。カスタムロジック用いた他AWSサービスの拡張やAWSの規模やパフォーマンスを用いたバックエンドサービスを作成できます。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

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

AWS(Amazon Web Services)

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

API

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

Q&A

0回答

1932閲覧

AWSS3のバケット上にJSファイルをおくと403エラーが検知されてしまう。

chii_m_o8o

総合スコア0

AWS Lambda

AWS Lambdaは、クラウド上でアプリを実行できるコンピューティングサービス。サーバーのプロビジョニングや管理を要せず複数のイベントに対してコードを実行します。カスタムロジック用いた他AWSサービスの拡張やAWSの規模やパフォーマンスを用いたバックエンドサービスを作成できます。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

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

AWS(Amazon Web Services)

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

API

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

0グッド

0クリップ

投稿2020/12/21 04:56

編集2020/12/22 08:12

前提・実現したいこと

https://qiita.com/IKEH/items/d1495a37649c25bcfc27
上記URLの記事と同じような方式のアプリを作成しておりますが
S3のバケッドにファイルを構築中失敗しており、質問させてください。

S3のバケッド上に機能を実装中に以下のエラーメッセージが発生しました。
htmlファイルはS3上にのったことが確認できましたが、jsファイルが動かない状況です。

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

エラーメッセージ Failed to load resource: the server responded with a status of 403 (Forbidden) 更にエラーメッセージが出ました。認証トークンはサーバー側なのかほかの問題かがみえておりません。 Access to XMLHttpRequest at 'https://u3ggdj59uj.execute-api.ap-northeast-1.amazonaws.com/prod/mywebapplicationtestapi?param1=%E3%81%98%E3%81%98' from origin 'https://mytestaccount20201211.s3-ap-northeast-1.amazonaws.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. u3ggdj59uj.execute-api.ap-northeast-1.amazonaws.com/prod/mywebapplicationtestapi?param1=%E3%81%98%E3%81%98:1 Failed to load resource: net::ERR_FAILED

該当のソースコード

const send_message = () => { // URLを作成 let input_label = document.getElementById("input_textfield"); var parameter = input_label.value; parameter = parameter.replace(/\r?\n/g, '\r\n'); // 改行コードを入れるとAWSでの処理が怪しかったので、文字列に置換している(TODO:改善) parameter = encodeURI(parameter); console.log(parameter); request_url = "https://u3ggdj59uj.execute-api.ap-northeast-1.amazonaws.com/prod/mywebapplicationtestapi?param1="; request_url = request_url + parameter; console.log(request_url); // リクエストオブジェクトの作成 var request = new XMLHttpRequest(); request.open('GET', request_url, true); request.setRequestHeader("x-api-key", "KrgMcwsA3gFO3AgnlkDc3W3PneYdlMh5nFezGQh0"); request.responseType = 'json'; // リクエストが成功したときに呼ばれる関数 request.onload = function () { var json_data = this.response; var return_message = JSON.parse(json_data["body"]); // 結果をhtmlに表示する let output_label = document.getElementById("output_label"); output_label.innerText = return_message }; request.send(); // URLリクエストを送信する }

試したこと

chromeでAWSにアクセスしていたため、chromeのアクセス権等確認し
認証の設定を試しました。

Cloud Frontの設定の見直しをしました。

補足情報(FW/ツールのバージョンなど)

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

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

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

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

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

A_kirisaki

2020/12/21 08:09

JavaScript 自体が読み込めていないのですか?コンソール(F12 を押すと出る)の Network から確認してみてください
chii_m_o8o

2020/12/21 08:24

エラーメッセージを検出しましたので情報提供します。 ①<?xml version="1.0" encoding="UTF-8"?> <Error><Code>InvalidRequest</Code><Message>The authorization mechanism you have provided is not supported. Please use Signature Version 4.</Message><RequestId>8D6CCA18CD088969</RequestId><HostId>QMvKv/JTymZUnkY0Ygy7+kQ9o/6TZdaepcCYvDq/L0WYsRKSgPD+T9N1XR4J1fxHkWvqjIpgxtE=</HostId></Error> ②<Error> <Code>InvalidRequest</Code> <Message>The authorization mechanism you have provided is not supported. Please use Signature Version 4.</Message> <RequestId>1CE8DE00BFFE6719</RequestId> <HostId>HTvbuHJUrpDl6fmM3Jog4e7BigICi+ifuGiXmEDP1Gv2z/3kIfjSjMb4rjA4Fd3mfuBBZ0gL0WI=</HostId> </Error>
chii_m_o8o

2020/12/21 08:26

「指定した認証メカニズムはサポートされていません。署名バージョン4を使用してください。」 Failed to load resource: the server responded with a status of 400 (Bad Request)
chii_m_o8o

2020/12/21 08:32 編集

エラーメッセージがでており、読み込めていないようです。 解消方法がさっぱり不明な状況です。
A_kirisaki

2020/12/22 07:20

そもそも S3 上の HTML にはアクセスできているのでしょうか
chii_m_o8o

2020/12/22 07:22

アクセスできています。
chii_m_o8o

2020/12/22 08:12

更にエラーメッセージが出ました。認証トークンはサーバー側なのかほかの問題かがみえておりません。 Access to XMLHttpRequest at 'https://u3ggdj59uj.execute-api.ap-northeast-1.amazonaws.com/prod/mywebapplicationtestapi?param1=%E3%81%98%E3%81%98' from origin 'https://mytestaccount20201211.s3-ap-northeast-1.amazonaws.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. u3ggdj59uj.execute-api.ap-northeast-1.amazonaws.com/prod/mywebapplicationtestapi?param1=%E3%81%98%E3%81%98:1 Failed to load resource: net::ERR_FAILED エラーメッセージがさらに出ました。
A_kirisaki

2020/12/22 08:20

バケットポリシー の設定はしましたか?
chii_m_o8o

2020/12/22 08:34

{"message":"Missing Authentication Token"} JSファイルにはこんなメッセージがでています。
A_kirisaki

2020/12/22 08:37

あ、じゃあ JavaScript は動いてるっぽいですね。上の記事戻って lambda の設定しましょう
chii_m_o8o

2020/12/22 08:41

lambda の設定は正しく入っているはずなのですが、なぜですか? テストも成功しております。。。
chii_m_o8o

2020/12/22 08:42

Response: { "statusCode": 200, "body": "\"\\u300cHello\\u300d\\u3068\\u3044\\u3046\\u6587\\u7ae0\\u3092Lambda\\u3067\\u53d7\\u4fe1\\u3057\\u307e\\u3057\\u305f\\u3002\"" } Request ID: "15310519-f2ce-4ada-9130-382415fec482" Function logs: START RequestId: 15310519-f2ce-4ada-9130-382415fec482 Version: $LATEST END RequestId: 15310519-f2ce-4ada-9130-382415fec482 REPORT RequestId: 15310519-f2ce-4ada-9130-382415fec482 Duration: 1.10 ms Billed Duration: 2 ms Memory Size: 128 MB Max Memory Used: 52 MB Init Duration: 114.15 ms
A_kirisaki

2020/12/22 09:01

お、じゃあ行けそうじゃないですか?
chii_m_o8o

2020/12/23 08:34

再度チャレンジしてもjsファイルが動かないです。
chii_m_o8o

2020/12/23 08:56 編集

$ curl -I https://mytestaccount20201211.s3-ap-northeast-1.amazonaws.com/Mytestaccount/mytestaccount20201211.html HTTP/1.1 200 OK x-amz-id-2: TiX6aDUA2J1jI4a9auJUeD4Jb8WPOMJ1VQfecrQvKs5QW5UkUhvzHqu1sBltj4LofCXD4pfLaF0= x-amz-request-id: 9D966090543253B3 Date: Wed, 23 Dec 2020 08:49:57 GMT Last-Modified: Thu, 17 Dec 2020 08:32:10 GMT ETag: "a2109e42a7ae5f9966afd1d912d6d2af" x-amz-version-id: cl24zchpLqxqMNNHlNmmMzSqo1hPMz0o Accept-Ranges: bytes Content-Type: text/html Content-Length: 728 Server: AmazonS3 XXX@XX-XX-XXXXX XXXXXXXX~ $ curl -I https://mytestaccount20201211.s3-ap-northeast-1.amazonaws.com/Mytestaccount/mytestaccount_3.js HTTP/1.1 200 OK x-amz-id-2: 4jmSCzccqb6lJRiSq5KtKsTzzbSFnZQsktBUbUB1ufAf0LPO/nxJOSBT2Xcr9M6rl1JvmGySyec= x-amz-request-id: 758A7E072A32CDA2 Date: Wed, 23 Dec 2020 08:52:42 GMT Last-Modified: Wed, 16 Dec 2020 08:16:08 GMT ETag: "64d5e3f89444dafdd487a38d18f5cc40" x-amz-version-id: 0pfdlAI6e7X1xVC0wtzedmQHzOemv5vT Accept-Ranges: bytes Content-Type: application/javascript Content-Length: 1290 Server: AmazonS3
chii_m_o8o

2020/12/23 09:01

curlは疎通しているようです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

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

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

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問