使用Python+Flask开发闪卡应用时遇Unsupported Media Type错误求助

核心问题原因 #

后端接口期望接收application/json格式的请求，但前端提交的表单数据默认是application/x-www-form-urlencoded或multipart/form-data格式，两者Content-Type不匹配，触发了错误提示。

具体修复方案 #

方案一：修改后端适配表单提交格式 #

如果前端是普通表单提交，后端无需强制解析JSON，改用表单字段获取方式：

# app.py 中接收请求的路由修改示例
@app.route('/submit-card', methods=['POST'])
def submit_card():
    # 通过form对象获取表单字段值
    course = request.form.get('course')
    lecture = request.form.get('lecture')
    front = request.form.get('front')
    back = request.form.get('back')
    # 后续业务逻辑处理...

方案二：修改前端以JSON格式提交数据 #

若坚持使用JSON格式交互，需修改前端代码，手动构造JSON数据并设置正确的请求头：

<!-- make.html 中的表单与提交逻辑修改示例 -->
<form id="card-form">
    <input type="text" name="course" placeholder="Course">
    <input type="text" name="lecture" placeholder="Lecture">
    <textarea name="front" placeholder="Front of card"></textarea>
    <textarea name="back" placeholder="Back of card"></textarea>
    <button type="submit">Submit</button>
</form>

<script>
document.getElementById('card-form').addEventListener('submit', function(e) {
    e.preventDefault(); // 阻止默认表单提交行为
    // 将表单数据转为JSON对象
    const formData = new FormData(this);
    const jsonData = Object.fromEntries(formData.entries());
    
    // 以JSON格式发送请求
    fetch('/submit-card', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(jsonData)
    })
    .then(response => response.json())
    .then(data => {
        // 处理后端响应
        console.log(data);
    })
    .catch(error => {
        console.error('Submit error:', error);
    });
});
</script>

调试建议 #

• 打开浏览器开发者工具（F12），查看网络请求面板，确认请求的Content-Type和请求体内容是否符合后端要求。
• 若后端必须接收JSON，需确保前端请求头中Content-Type严格设置为application/json，且请求体是合法的JSON字符串。

内容的提问来源于stack exchange，提问作者Capver