

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)


CC BY-SA 4.0
2022-09-21T05:26:13.517
91205
2022-10-14T19:02:42.983
2022-09-28T01:02:55.313
54463
54463
question
javascript html aws cors
corsエラー「Access-Control-Allow-Origin: *」の設定方法


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]

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


CC BY-SA 4.0
2022-09-27T10:51:23.510
91337
2022-09-27T10:51:23.510
2376
91205
answer


JS のコードを拝見するにカスタムヘッダーを用いたいという意図がみえますので、プリフライトを伴う CORS の設定を行う必要があります。  
<https://developer.mozilla.org/ja/docs/Web/HTTP/CORS#preflighted_requests>

API GW + Lambda の構成の場合、下記URLのような実装パターンがあり、ご自身の環境に合わせて最適な実装を選択していただく必要があります。  
<https://docs.aws.amazon.com/ja_jp/apigateway/latest/developerguide/how-to-
cors.html>

主に API GW あるいは Lambda で以下のヘッダーを適切に実装することになります。ご参考まで。

  * Access-Control-Allow-Methods
  * Access-Control-Allow-Headers
  * Access-Control-Allow-Origin


CC BY-SA 4.0
2022-10-14T19:02:42.983
91606
2022-10-14T19:02:42.983
16793
91205
answer