Flask开发纸翻花(Cootie Catcher)程序提交表单时遭遇415 Unsupported Media Type错误求助

问题描述 #

我刚接触Python和Flask，正在捣鼓一个纸翻花（Cootie Catcher）程序。我参考了一些教程，目前先测试谷歌AI生成的代码，打算等搞懂逻辑后再自己动手写。但每次点击表单的提交按钮时，都会弹出这个错误：

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

我的HTML文件内容如下：

<div class="snippet" data-lang="js" data-hide="false" data-console="true">
<!-- 注：此处代码可能未粘贴完整，若有完整表单代码可以补充后更精准排查 -->
</div>

解决方案 #

这个问题其实很常见，核心原因就是后端期待的请求格式和前端实际发送的格式不匹配，下面给你几个针对性的解决办法：

1. 调整后端代码，适配普通表单提交

如果你的前端是普通的HTML表单（没有用JS异步提交），那后端大概率错误地用了request.get_json()来获取数据——这个方法只认JSON格式的请求。你需要改成用request.form来获取表单字段：

# 示例Flask路由代码
@app.route('/your-submit-path', methods=['POST'])
def handle_submit():
    # 用request.form.get()获取对应表单字段的值
    user_choice = request.form.get('choice')  # 这里替换成你的表单字段名
    # 后续的纸翻花逻辑处理
    return render_template('result.html', result=your_result)

2. 若后端必须用JSON，调整前端提交方式

如果你确实需要后端接收JSON格式数据，那原生HTML表单没法直接做到（浏览器原生表单不支持application/json的编码类型），得用JavaScript来异步提交：

// 给表单绑定提交事件
document.getElementById('your-form-id').addEventListener('submit', function(e) {
    e.preventDefault(); // 阻止默认的表单跳转行为
    // 把表单数据转成JSON格式
    const formData = new FormData(this);
    const jsonPayload = Object.fromEntries(formData.entries());
    
    // 用fetch发送JSON请求
    fetch(this.action, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(jsonPayload),
    })
    .then(res => res.json())
    .then(data => {
        // 处理返回结果，比如显示纸翻花的结果
        console.log(data);
    })
    .catch(err => console.error('提交出错:', err));
});

3. 额外检查点

• 确认你的HTML表单的method属性是POST，不要写成GET；
• 不要给表单设置enctype="application/json"，浏览器不支持这个属性，只会导致提交异常；
• 如果用了Flask-WTF等表单扩展，确保你的表单类配置正确，没有强制要求JSON格式。

备注：内容来源于stack exchange，提问作者Megan Smith