実現したいこと

AWS Amplifyを用いて、以下のように文字を入力し入力ボタンを押すとコンソールにメッセージを表示させたいと考えています。

ホーム画面

コンソール

現在の状況

コンソールに以下のように表示される。

Hello World!
success <?xml version="1.0" encoding="UTF-8"?>
<Error>
<Code>MethodNotAllowed</Code>
<Message>The specified method is not allowed against this resource.</Message>
<Method>POST</Method>
<ResourceType>OBJECT</ResourceType>
<RequestId>1699A143D821A235</RequestId>
<HostId>THzvV7Gn/xDWBERP9BkyocsFLNF9RxhKyq7F/AfSuXtpaYhYtHE3a3DnBE/wFtcjBZa3NReIlZY=</HostId>
</Error>

2．エラーが2つ出ている。

GET https://main.d3nyopbqvhjk4a.amplifyapp.com/favicon.ico/ 403
▼POST https://main.d3nyopbqvhjk4a.amplifyapp.com/test.py 405
 callAPI @ (index):17
 onclick @ (index):28

うまくいかないこと

以下のようにpythonからの出力がコンソールに表示されない。

入力した文字列は、Hello World!です。

試したこと

EC2 Linux2 インスタンスで試してみたところ、期待通りの結果が得られました。

現在のソースコード

html
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="UTF-8">
5    <title>Document</title>
6    <script>
7        var callAPI = (input)=>{
8            var myHeaders = new Headers();
9            console.log(input)
10            myHeaders.append("Content-Type", "text/html");
11            var requestOptions = {
12                method: 'POST',
13                headers: myHeaders,
14                body: input,
15                redirect: 'follow'
16            };
17            fetch("test.py", requestOptions)
18            .then(response => response.text())
19            .then(result => console.log('success', result))
20            .catch(error => console.log('error', error));
21        }
22    </script>
23</head>
24<body>
25    <form>
26        <label>文字を入力してください</label>
27        <input type="text" id="input">
28        <button type="button" onclick="callAPI(document.getElementById('input').value)">入力</button>
29    </form>
30</body>
31</html>

python
1#!/usr/bin/python3
2# -*- coding: utf-8 -*-
3
4import sys
5
6data = sys.stdin.readline()
7print('Content-type: text/html\n')
8print('入力された文字は、' + data + 'です。')