Python后端POST数据至Flask前端及前端GET获取的问题求助
2026-5-9
解决Flask前后端对接的连接拒绝问题及正确的数据传递思路
看起来你踩了两个常见的Flask坑：一是在应用还没启动的时候就尝试向自己发请求，二是对前后端数据传递的思路有点走偏了。我来一步步帮你解决：
为什么会出现连接拒绝错误？
你在__init__.py里直接调用requests.post("http://localhost:5000/getjson", json=message)的时候，Flask应用还没有真正启动运行——这时候localhost:5000端口根本没有服务在监听，自然会被目标机器拒绝连接。__init__.py是用来初始化应用的，这个阶段服务还没开始接收请求呢！
正确的前后端数据传递思路
你不需要让后端主动POST数据到前端，应该换两种更合理的方式：要么在渲染模板时直接把数据传给前端，要么提供一个API接口让前端主动去获取。
方案一：渲染模板时直接传入数据（适合简单场景）
这种方式最直接，后端在渲染页面的时候把数据一起传给模板，前端直接就能用。
- 修改
__init__.py，把数据处理逻辑封装成函数，方便其他模块调用：
from flask import Flask import json app = Flask(__name__) def generate_message(): # 这里替换成你实际生成dicts的逻辑 dicts = {"status": "success", "data": ["item1", "item2", "item3"]} return json.dumps(dicts) from app import routes
- 更新
routes.py，在渲染index页面时传入生成的message：
from flask import render_template from app import app, generate_message @app.route('/') @app.route('/index') def index(): user = {'username': 'Me'} # 调用函数获取数据 message = generate_message() return render_template('index.html', title='Home', user=user, message=message)
- 修改
index.html，直接使用后端传来的数据：
<html> <head> <title>{{ title }} - Status Checker</title> <script> // 把后端传的JSON字符串转成JS对象，注意用|safe防止转义 const messageData = JSON.parse('{{ message|safe }}'); // 页面加载完成后做可视化 document.addEventListener('DOMContentLoaded', function() { const container = document.createElement('div'); container.innerHTML = `<h3>获取到的数据:</h3><pre>${JSON.stringify(messageData, null, 2)}</pre>`; document.body.appendChild(container); }); </script> </head> <body> <h1>Hello, {{ user.username }}!</h1> </body> </html>
方案二：提供API接口让前端AJAX获取（适合复杂交互场景）
如果你的可视化需要异步加载，或者数据会动态更新，这种方式更合适。
同样先修改
__init__.py封装数据生成函数（和方案一一样）。更新
routes.py，添加专门的接口返回JSON数据：
from flask import render_template, jsonify import json from app import app, generate_message @app.route('/') @app.route('/index') def index(): user = {'username': 'Me'} return render_template('index.html', title='Home', user=user) # 提供GET接口返回JSON数据 @app.route('/getjson', methods=['GET']) def getjson(): message_str = generate_message() # 把JSON字符串转回字典，用jsonify返回标准的JSON响应 return jsonify(json.loads(message_str))
- 修改
index.html，用fetch API请求接口获取数据：
<html> <head> <title>{{ title }} - Status Checker</title> <script> document.addEventListener('DOMContentLoaded', function() { // 异步请求后端接口 fetch('/getjson') .then(response => { if (!response.ok) throw new Error('请求失败'); return response.json(); }) .then(data => { // 这里写你的可视化逻辑，比如渲染图表、表格等 const container = document.createElement('div'); container.innerHTML = `<h3>异步获取的数据:</h3><pre>${JSON.stringify(data, null, 2)}</pre>`; document.body.appendChild(container); }) .catch(error => console.error('出错了:', error)); }); </script> </head> <body> <h1>Hello, {{ user.username }}!</h1> </body> </html>
最后启动应用的正确方式
确保你的check.py是用来启动应用的：
from app import app if __name__ == '__main__': app.run(debug=True)
然后通过python check.py启动服务，这时候localhost:5000才会有服务监听，前端请求也能正常响应了。
内容的提问来源于stack exchange，提问作者user10255809
