Flask端点POST请求失败求助：触发404错误

核心问题定位 #

从控制台报错的URL http://127.0.0.1:5001/;/predict 可以直接看出：请求路径中多了非法的;符号，这是$SCRIPT_ROOT变量值异常导致的URL拼接错误，这是最可能的根因。

排查与解决步骤 #

1. 检查$SCRIPT_ROOT的赋值与实际值 #

• Flask通常通过模板注入$SCRIPT_ROOT，确保HTML中正确注入：

  <script>var $SCRIPT_ROOT = {{ request.script_root|tojson }};</script>
  

• 打开浏览器控制台，直接输入$SCRIPT_ROOT查看实际值：如果输出是"/;"、";"或其他异常值，说明注入格式错误，需要修正模板代码。

2. 修正URL拼接逻辑 #

• 避免手动拼接字符串的潜在问题，改用URL构造函数构建请求地址：

  const url = new URL('/predict', $SCRIPT_ROOT);
  fetch(url, {
    method: "POST",
    body: JSON.stringify({ message: text1 }),
    mode: "cors",
    headers: {
      "Content-Type": "application/json",
    },
  })
  

• 可以先硬编码URL测试：将$SCRIPT_ROOT + "/predict"替换为"http://127.0.0.1:5001/predict"，如果请求成功，直接确认是$SCRIPT_ROOT的问题。

3. 补充调试验证 #

• 在fetch请求前打印URL，确认拼接结果：

  console.log('请求URL:', $SCRIPT_ROOT + "/predict");
  

• 用curl或Postman直接测试Flask端点，排除前端问题：

  curl -X POST http://127.0.0.1:5001/predict \
    -H "Content-Type: application/json" \
    -d '{"message":"测试消息"}'
  

• 检查Flask的CORS配置，确保用flask-cors正确初始化：

  from flask_cors import CORS
  app = Flask(__name__)
  CORS(app)  # 或指定允许的域名如CORS(app, resources={r"/predict": {"origins": "*"}})
  

• 查看Flask控制台日志：如果日志中没有/predict的请求记录，说明请求根本没到达服务端，还是前端URL的问题。

按钮触发事件的注意事项 #

• 阻止默认表单提交：如果发送按钮在<form>标签内，点击会触发表单默认提交行为，导致页面刷新中断请求，需在事件处理函数中添加：

  document.getElementById('send-btn').addEventListener('click', function(event) {
    event.preventDefault(); // 阻止默认行为
    // 执行fetch请求逻辑
  });
  

• 确认输入值获取正确：检查text1变量是否正确获取了输入框内容，避免因输入值为空导致后续逻辑异常（虽然不会引发404，但会影响功能）。
• 确保事件绑定时机正确：如果按钮是动态生成的，需使用事件委托（如绑定到父元素），或在DOM加载完成后再绑定事件，避免事件无效。

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