[Python] Flask HTML Cootie Catcher -- 415 Unsupported Media Type

I am new to Python and Flask and am trying to write a cootie catcher program. I've looked at a few tutorials and am testing what the google AI gave me until I can understand what's happening. Whenever I hit the submit button in my form, I get the following error:

Unsupported Media Type Did not attempt to load JSON data because the request Content-Type was not 'application/json'.

Here is my html file:


<!DOCTYPE html>
<html>
<head>
<title>Fortune Teller</title>
</head>
<body>

<h1>Fortune Teller</h1>

<div class="form">
<form method="POST" action="/fortune">
<input type="text" name="user">
<select name="color">
<!-- onclick listens for click event and informs button function -->
<option onclick="getFortune('color', 'red')">red</option>
<option onclick="getFortune('color', 'yellow')">yellow</option>
<option onclick="getFortune('color', 'blue')">blue</option>
<option onclick="getFortune('color', 'green')">green</option>
</select>
<select name="number">
<option onclick="getFortune('number', '1')">1</option>
<option onclick="getFortune('number', '2')">2</option>
<option onclick="getFortune('number', '3')">3</option>
<option onclick="getFortune('number', '4')">4</option>
</select>
<button >submit</button>
</form>
</div>

<div id="fortune">
<!-- A Fortune Will Appear Here -->
</div>

<!-- grabs form data, uses it to return a fortune message to specified area of webpage-->
<script>
function getFortune(choiceType, choice) {
// connects getFortune js function to get_function python method
fetch('/fortune', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({choiceType: choiceType, choice: choice}),
})
// format response
.then(response => response.json())
// return response to window
.then(data => {
document.getElementById('fortune').textContent = data.fortune;
});
}
</script>

</body>
</html>

and here is my Python File:

from flask import Flask, render_template, request, jsonify
import random

app = Flask(__name__)

fortunes = {
"colors": {
"red": ["RA", "RB"],
"yellow": ["YA", "YB"],
"blue": ["BA", "BB"],
"green": ["GA", "GB"],
},
"numbers": {
"1": ["1A", "1B"],
"2": ["2A", "2B"],
"3": ["3A", "3B"],
"4": ["4A", "4B"],
}
}

@app.route('/')
def default():
return render_template('fortune.html')

@app.route('/fortune',methods = ['GET', 'POST'])
def get_fortune():
data = request.get_json()
choice_type = data['choiceType']
choice = data['choice']

if choice_type == 'number':
fortune_list = fortunes['numbers'].get(choice, ["Try again"])
elif choice_type == 'color':
fortune_list = fortunes['colors'].get(choice, ["Try again"])
else:
fortune_list = "Invalid choice."

fortune = random.choice(fortune_list)
return jsonify({'fortune': fortune})


if __name__ == '__main__':
app.run(debug = True)


If anyone can break down what the hang up is, I'd really appreciate it. Appreciate your time.

Continue reading...