corsエラー「Access-Control-Allow-Origin: *」の設定方法


HTMLとJavaScriptで作成した「入力フォーム＆HTTPリクエスト」のプログラムをAmazon S3にホスティングすると、 **corsエラー**
が発生してしまいます。

色々と調べてみましたが、まだまだ知識がなく、HTML、JavaScriptコードのどこにどのように `Access-Control-Allow-
Origin: *` を設定すれば解決できるかわからないため、教えて頂けないでしょうか。

**エラー内容1**

[code]

    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.
    
[/code]

**エラー内容2**

[code]

    GET https://〇〇〇 net::ERR_FAILED
    
[/code]

**HTMLコード**

[code]

    <!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>
    
[/code]

**JavaScriptコード**

[code]

    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リクエストを送信する
    }
    
[/code]

**Lambdaコード**

[code]

    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)
    }
    
[/code]

※下記ページのコードを参考にさせて頂いております。  
[Pythonしか書きたくない人が、AWS上にWEBアプリを作ってみました。](https://qiita.com/IKEH/items/d1495a37649c25bcfc27)




CORSヘッダーは API側（ajaxリクエストに対してレスポンスを返す側）で指定します。

大雑把には [REST API リソースの CORS を有効にする - Amazon API
Gateway](https://docs.aws.amazon.com/ja_jp/apigateway/latest/developerguide/how-
to-cors.html) にあるとおりです。

今回は単純なGETリクエストであり、`Access-Control-Allow-Origin`だけ付与して返せばいいので

[code]

    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)
    }
    
    
[/code]

といったところでしょうか。

