Problem with POST request

Getting Started with Rasa
1

Hello Guys,

I want to create a simple web frontend for my chatbot, which is running locally in a docker.
I can send post requests with curl -POST localhost:5005/parse -d '{"q":"hello"}' and receive an answer in json format.

As I am new to web development, I thought i can just create a simple textfield, a button and send the data via a POST request to the bot.

My Code so far looks like this:

index.js:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>My test site</title>
    </head>
    <body>
        <h1>Heading 1</h1>

        <input type="text" name="messagefield" id="messageid">

        <button id="sendmessage">Send Message</button>

        <script src="scripts/main.js"></script>
    </body>
</html>

main.js:

let myButton = document.getElementById('sendmessage');
let myHeading = document.querySelector('h1');
let myInputField = document.getElementById('messageid');

function sendMessage(){
    let message = myInputField.value;
    let url = 'https://localhost:5005/parse'
    let Data = {
        q : message
    };
    let params = {
        headers: {
            "content-type":"application/json; charset=UTF-8"
        },
        body: JSON.stringify(Data),
        method: "POST"
    };

    fetch(url, params)
    .then(res => res.json())
    .then(response => console.log('Success: ', JSON.stringify(response)))
    .catch(error => console.log('Error: ', error));
}

myButton.onclick = function(){
    sendMessage()
}

Now when i click the button, i don’t get the desired result, but the following errors:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://localhost:5005/parse. (Reason: CORS request did not succeed).

and:

Error: TypeError: "NetworkError when attempting to fetch resource."

On the bot side, I get the following errors:

rasa_core_1      | [2019-04-05 10:23:19 +0000] [1] [ERROR] Exception occurred while handling uri: unknown
rasa_core_1      | Traceback (most recent call last):
rasa_core_1      |   File "/usr/local/lib/python3.6/site-packages/sanic/server.py", line 251, in data_received
rasa_core_1      |     self.parser.feed_data(data)
rasa_core_1      |   File "httptools/parser/parser.pyx", line 193, in httptools.parser.parser.HttpParser.feed_data
rasa_core_1      | httptools.parser.errors.HttpParserInvalidMethodError: invalid HTTP method
rasa_core_1      | 2019-04-05 10:23:19 ERROR    sanic.root  - Exception occurred while handling uri: unknown
rasa_core_1      | Traceback (most recent call last):
rasa_core_1      |   File "/usr/local/lib/python3.6/site-packages/sanic/server.py", line 251, in data_received
rasa_core_1      |     self.parser.feed_data(data)
rasa_core_1      |   File "httptools/parser/parser.pyx", line 193, in httptools.parser.parser.HttpParser.feed_data
rasa_core_1      | httptools.parser.errors.HttpParserInvalidMethodError: invalid HTTP method

As this is my first time dealing with http and requests, it is possible, that i have done a quite silly error, but to my understanding the bot complains, that the http method used is invalid?
In the curl request that worked I used a POST request and in my javascript I also use POST as my method. So I don’t understand why this error happens and I would greatly appreciate any help I can get.
Thank you in advance