前提・実現したいこと
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/ツールのバージョンなど)
あなたの回答
tips
プレビュー