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

Question

前提・実現したいこと

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/ツールのバージョンなど）

Comments

[A_kirisaki]

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

[chii_m_o8o]

エラーメッセージを検出しましたので情報提供します。
①<?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]

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

[chii_m_o8o]

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

[A_kirisaki]

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

[chii_m_o8o]

アクセスできています。

[A_kirisaki]

https://qiita.com/dogwood008/items/a92abae789f4b0466f38 こちらのほうが参考になるかと思うのでぜひ試してください

[chii_m_o8o]

更にエラーメッセージが出ました。認証トークンはサーバー側なのかほかの問題かがみえておりません。

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]

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

[chii_m_o8o]

設定しました。

[chii_m_o8o]

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

[A_kirisaki]

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

[chii_m_o8o]

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

[chii_m_o8o]

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]

curl 使って直接読んだりしてみましょう https://qiita.com/buntafujikawa/items/758425773b2239feb9a7

[chii_m_o8o]

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"

メッセージが返ってきました。

[A_kirisaki]

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

[chii_m_o8o]

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

[chii_m_o8o]

$ 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]

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