HTMLとJavaScriptで作成した「入力フォーム&HTTPリクエスト」のプログラムをAmazon S3にホスティングすると、corsエラーが発生してしまいます。
色々と調べてみましたが、まだまだ知識がなく、HTML、JavaScriptコードのどこにどのように Access-Control-Allow-Origin: *
を設定すれば解決できるかわからないため、教えて頂けないでしょうか。
エラー内容1
Access to XMLHttpRequest at 'https://〇〇〇' from origin 'https://△△△' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.
エラー内容2
GET https://〇〇〇 net::ERR_FAILED
HTMLコード
<!DOCTYPE html>
<heml lang="ja">
<head>
<meta charset="utf-8">
<title>私のWebアプリケーション</title>
</head>
<body>
<article>
<h1>API Gatewayを呼び出すツール</h1>
<p>入力した文章をAWS Lambdaで処理します。Outputに処理した結果が表示されます。</p>
<section>
<h2>Input</h2>
<textarea id="input_textfield" name="input" rows="4" cols="60"></textarea>
<br>
<input type="submit" value="変換" onclick="send_message();">
<script src="MyWebApplicationTest.js"></script>
<h2>Output</h2>
<p id="output_label">(ここに結果が表示されます)</p>
</section>
</article>
</body>
</heml>
JavaScriptコード
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://〇〇〇";
request_url = request_url + parameter;
console.log(request_url);
// リクエストオブジェクトの作成
var request = new XMLHttpRequest();
request.open('GET', request_url, true);
request.setRequestHeader("x-api-key", "×××");
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リクエストを送信する
}
Lambdaコード
import json
def lambda_handler(event, context):
message = event['input']
edited_message = "「" + message + "」という文章をLambdaで受信しました。"
return {
'statusCode': 200,
'headers': {
'Access-Control-Allow-Origin': '*',
},
'body': json.dumps(edited_message)
}
※下記ページのコードを参考にさせて頂いております。
Pythonしか書きたくない人が、AWS上にWEBアプリを作ってみました。