Flask+JS报The method is not allowed for the requested URL错误排查

问题根源 #

• JS存在致命拼写错误，所有前端逻辑直接中断：代码中使用的document.getElementByID是不存在的DOM API，正确写法为document.getElementById（Id的d为小写）。浏览器运行到这行直接抛出引用错误，后续所有代码（事件绑定、AJAX请求、preventDefault逻辑）全部不执行。
• 事件绑定逻辑完全失效：代码把表单submit事件的监听写在了send_data函数内部，但send_data本身没有绑定到任何页面加载/点击事件上，页面打开后从来没有被执行过，等于从未给表单注册过阻止默认提交的逻辑。
• 405报错直接原因：JS失效后表单走原生提交逻辑，若form标签设置了method="POST"但未配置action属性，浏览器会向根路由/发送POST请求，而根路由@app.route('/')默认仅接受GET请求，Flask直接返回方法不允许的405错误。
• 后端预测逻辑存在维度bug：构造输入DataFrame时传入的是一维列表，会被解析为4行1列的数据，和模型要求的1行4列输入维度不匹配，就算请求通了也会触发预测报错。

修复步骤 #

1. 替换原有JavaScript代码 #

删掉原来写的form_handler、send_data函数，换成以下逻辑，确保DOM加载完成后再绑定事件，直接在submit回调里阻止默认提交、发送AJAX：

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector("form");
    const predictionDom = document.getElementById("prediction"); // 注意拼写：Id的d小写

    form.addEventListener("submit", function(e) {
        e.preventDefault();
        const formData = new FormData(form);
        const xhr = new XMLHttpRequest();
        xhr.open('POST', '/predict', true);

        predictionDom.innerHTML = "PLEASE WAIT...";
        xhr.onreadystatechange = function() {
            if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
                predictionDom.innerHTML = "Prediction: Rs. " + xhr.responseText;
            }
        }
        xhr.send(formData);
    })
})
</script>

注意：不需要给提交按钮额外绑定onclick事件，只要按钮是type="submit"，上述代码会自动拦截提交行为。

2. 修正后端Flask代码 #

调整predict路由的请求判断、异常捕获，修正DataFrame构造的维度问题：

import pandas as pd
# 其他原有导入和初始化代码保留

@app.route('/')
def index():
    locations = sorted(data['location'].unique())
    return render_template('index.html', locations=locations)

@app.route('/predict', methods=['GET', 'POST'])
def predict():
    # 拦截GET请求，避免无效访问
    if request.method == 'GET':
        return "接口仅支持POST提交", 405
    try:
        location = request.form.get('location')
        bhk = float(request.form.get('BHK', 0))
        bath = float(request.form.get('bath', 0))
        sqft = float(request.form.get('sqft', 0))

        # 传入二维列表构造1行4列的输入，匹配模型输入维度
        input_df = pd.DataFrame(
            [[location, sqft, bath, bhk]],
            columns=['location', 'total_sqft', 'bath', 'bhk']
        )
        prediction = pipe.predict(input_df)[0]
        return str(prediction)
    except Exception as e:
        return f"请求参数错误: {str(e)}", 400

3. 表单检查 #

确保页面中存在id为prediction的标签（比如<div id="prediction"></div>）用来展示预测结果即可，不需要给form标签额外加action或method属性，JS会自动处理提交逻辑。

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