How to Configure Cors Error AAccess-Control-Allow-Origin:* 」

When I host an "Input Form & HTTP Request" program created in HTML and JavaScript to Amazon S3, I get a cors error.

I have looked into many things, but I am still not familiar with HTML or JavaScript code, and I do not know where and how to set Access-Control-Allow-Origin:* to solve this problem, so could you please let me know?

Error Contents 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 highlight response.

Error Contents 2

 GET https:// 〇 :net::ERR_FAILED

HTML code

<!DOCTYPE html>
<hemlang="ja">
<head>
    <metacharset="utf-8">
    <title>My Web Application</title>
</head>
<body>

<article>
    <h1> Tools to invoke API Gateway</h1>
    <p>AWS Lambda handles the sentences you enter.Output displays the results.</p>
    <section>
        <h2>Input</h2>
        <textarea id="input_textfield" name="input" rows="4"cols="60"></textarea>
        <br>
        <input type="submit" value="conversion" onclick="send_message();">
        <scriptsrc="MyWebApplicationTest.js"></script>
        <h2>Output</h2>
        <pid="output_label"> (where you see the results)</p>
    </section>
</article>
</body>
</heml>

JavaScript code

const send_message=()=>{
    // Create URL
    let input_label = document.getElementById("input_textfield");
    var parameter=input_label.value;
    parameter=parameter.replace(/\r?\n/g, '\\r\\n'); // Replace with string as AWS processing was suspicious when line feed code was entered (TODO: Improvement)
    parameter=encodeURI(parameter);
    console.log(parameter);

    request_url="https:// 〇 "";
    request_url = request_url + parameter;
    console.log(request_url);

    // Create Request Object
    var request = new XMLHttpRequest();
    request.open('GET', request_url, true);
    request.setRequestHeader("x-api-key", "xxx";
    request.responseType='json';

    // function called upon successful request
    request.onload=function(){
        varjson_data =this.response;
        var return_message=JSON.parse(json_data["body"]);
        // display results in html
        let output_label = document.getElementById("output_label");
        output_label.innerText=return_message
    };

    request.send(); // Send URL request
}

Lambda Code

import json

deflambda_handler(event, context):
    message = event ['input']
    The edited_message="+message+" sentence was received on Lambda."

US>return{
    'statusCode': 200,
    'headers': {
    'Access-Control-Allow-Origin': '*',
    },
    'body': json.dumps (edited_message)
}

*Please refer to the code on the page below.
People who only want to write Python have created a web app on AWS.

javascript html aws cors

2022-09-30 22:05

1 Answers

The CORS header is specified on the API side (the one that responds to ajax request).

Roughly speaking, Enable CORS for REST API resources as found in the Amazon API Gateway.

This is a simple GET request, and you only need to give and return Access-Control-Allow-Origin.

import json

deflambda_handler(event, context):
    message = event ['input']
    The edited_message="+message+" sentence was received on Lambda."

US>return{
    'statusCode': 200,
    'headers': {
        'Access-Control-Allow-Origin': '*',
    },
    'body': json.dumps (edited_message)
}

That's about it.

2022-09-30 22:05

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656