Q&A
JavaScript 自体が読み込めていないのですか？コンソール（F12 を押すと出る）の Network から確認してみてください
前提・実現したいこと
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/ツールのバージョンなど）
エラーメッセージを検出しましたので情報提供します。
①<?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>
「指定した認証メカニズムはサポートされていません。署名バージョン4を使用してください。」
Failed to load resource: the server responded with a status of 400 (Bad Request)
エラーメッセージがでており、読み込めていないようです。
解消方法がさっぱり不明な状況です。
そもそも S3 上の HTML にはアクセスできているのでしょうか
アクセスできています。
https://qiita.com/dogwood008/items/a92abae789f4b0466f38 こちらのほうが参考になるかと思うのでぜひ試してください
更にエラーメッセージが出ました。認証トークンはサーバー側なのかほかの問題かがみえておりません。
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
エラーメッセージがさらに出ました。
バケットポリシー の設定はしましたか？
設定しました。
{"message":"Missing Authentication Token"}
JSファイルにはこんなメッセージがでています。
あ、じゃあ JavaScript は動いてるっぽいですね。上の記事戻って lambda の設定しましょう
lambda の設定は正しく入っているはずなのですが、なぜですか？
テストも成功しております。。。
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
curl 使って直接読んだりしてみましょう https://qiita.com/buntafujikawa/items/758425773b2239feb9a7
curl -X GET https://u3ggdj59uj.execute-api.us-east-1.amazonaws.com/prod/mytestaccountapi?param1=Hello --> <stdout>
--_curl_--https://u3ggdj59uj.execute-api.ap-northeast-1.amazonaws.com/prod/mywebapplicationtestapi?param1=Hello
body: "u300cHellou300du3068u3044u3046u6587u7ae0u3092Lambdau3067u53d7u4fe1u3057u307eu3057u305fu3002"
メッセージが返ってきました。
お、じゃあ行けそうじゃないですか？
再度チャレンジしてもjsファイルが動かないです。
$ 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
curlは疎通しているようです。
あなたの回答
tips
プレビュー
