本文针对 Flask Blueprint 中使用 POST 请求传递 URL ID 时遇到的 404 错误，提供了一种解决方案。通过分析问题原因，阐述了在 JavaScript 中构建请求 URL 的正确方法，避免了 Blueprint 路由匹配失败的问题，确保请求能够正确地路由到 Blueprint 中的端点。
在使用 Flask Blueprint 构建 Web 应用时，经常需要在 URL 中传递 ID 作为参数。如果在前端使用 JavaScript 发起 POST 请求时，URL 构建不正确，可能会导致 404 错误。下面将详细介绍这个问题的原因以及解决方案。
问题分析
当我们在页面 localhost/2/updatestrat 上，尝试通过 JavaScript 发起 POST 请求到 /add_indicator 时，期望 Flask Blueprint 能够正确地将 URL 中的 ID (例如：2) 传递到 add_indicator 函数。然而，如果直接使用 /add_indicator 作为 endpoint，请求实际上会发送到 http://127.0.0.1:5000/add_indicator，而不是 http://127.0.0.1:5000/2/add_indicator。这导致 Flask 无法找到匹配的路由，从而返回 404 错误。
getJson 函数之所以能够正常工作，是因为它在没有明确指定根路径的情况下，浏览器会自动将当前页面的路径作为基础路径，从而正确地发送到 /2/load_conditions。
解决方案
解决方案在于，在 JavaScript 中构建请求 URL 时，要确保 URL 与 Blueprint 中定义的路由相匹配。
错误示例：
汇成装潢行业企业网站系统vII2.4 管理地址：http://您的网站/admin/login.asp 后台帐号：admin 后台密码：admin 升级： 2012-11-7 1.升级在线客服的插架解决兼容性问题 2.设计ID传递参数问题 3.升级留言板的问题--屏蔽敏感字 2012-05-03 1.修复广大网友反映的图片上传100KB的问题 2.修复成功案例指针问题 2012-03-21 1.开
let indi_data = await postJsonGetData(data, "/add_indicator"); // 错误：缺少 ID
正确示例：
let indi_data = await postJsonGetData(data, "add_indicator"); // 正确：相对路径，自动包含 ID
或者，更明确的方式：
let strategyId = 2; // 或者从页面元素中获取
let indi_data = await postJsonGetData(data, `${strategyId}/add_indicator`); // 明确构建 URL在 Flask Blueprint 中，路由定义如下：
from flask import Blueprint, request, jsonify
from flask_login import login_required
bp = Blueprint('my_blueprint', __name__)
@bp.route('//add_indicator', methods=['POST'])
@login_required
def add_indicator(strategy_id):
if request.method == 'POST':
data = request.get_json() # 获取 POST 请求中的 JSON 数据
print(f"Strategy ID: {strategy_id}")
print(f"Received data: {data}")
return jsonify({"message": "Indicator added successfully"}) # 返回 JSON 响应 代码解释
- Blueprint 定义： 使用 Blueprint 类创建一个 Blueprint 实例，命名为 my_blueprint。
-
路由定义： @bp.route('/
/add_indicator', methods=['POST']) 定义了一个路由，该路由接受一个整数类型的 strategy_id 作为 URL 参数，并且只响应 POST 请求。 - add_indicator 函数： 这个函数处理 POST 请求。它接收 strategy_id 作为参数，并从 request 对象中获取 JSON 数据。 request.get_json() 用于解析请求体中的 JSON 数据。
- JSON 响应： jsonify({"message": "Indicator added successfully"}) 创建一个 JSON 响应，包含一个 message 键，值为 "Indicator added successfully"。
注意事项
- 确保 Blueprint 已经正确注册到 Flask 应用中。
- 在 JavaScript 中，如果使用绝对路径 /add_indicator，则 Flask 会认为该路由在根目录下，而不是在 Blueprint 中。
- 在 Flask 中，使用 request.get_json() 可以方便地获取 POST 请求中的 JSON 数据。
总结
在使用 Flask Blueprint 时，正确构建 URL 至关重要。通过使用相对路径或者明确地构建包含 ID 的 URL，可以避免 404 错误，确保 POST 请求能够正确地路由到 Blueprint 中的端点。同时，合理使用 Flask 提供的工具函数，如 request.get_json() 和 jsonify()，可以简化请求处理和响应构建。
