使用Flask redirect(url_for)传参时，axios无法获取数据的问题

核心问题 #

你的代码存在三个关键问题：Flask路由逻辑错误、Vue请求路径缺少必要参数、跨域限制（可能）。

Flask端修复 #

1. GET请求无法获取JSON数据：
   GET请求没有请求体，request.get_json()会返回None，导致redirect时usr参数为空，无法匹配/results/<usr>路由。根据需求调整请求方法和参数获取方式：

   from flask import Flask, request, redirect, url_for
   from flask_cors import CORS  # 解决跨域需安装：pip install flask-cors
   
   app = Flask(__name__)
   CORS(app)  # 开启全局跨域支持
   
   @app.route('/', methods=["GET", "POST"])
   def home():
       usr = None
       if request.method == "POST":
           # 前端用POST传JSON格式数据，比如{"usr": "test_user"}
           usr = request.get_json().get('usr')
       elif request.method == "GET":
           # 前端用GET URL参数传值，比如http://127.0.0.1:5000/?usr=test_user
           usr = request.args.get('usr')
       
       if usr:
           return redirect(url_for("getResults", usr=usr))
       return "Missing user parameter"
   
   @app.route('/results/<usr>')
   def getResults(usr):
       # 路由默认仅响应GET请求，无需额外判断
       return f"User: {usr} - Please work :<"
   

2. 移除冗余的请求方法判断：
   getResults路由默认只接受GET请求，无需再写if request.method == "GET"，直接返回内容即可。

Vue端修复 #

1. 补充请求路径的usr参数：
   当前请求路径http://127.0.0.1:5000/results/缺少usr参数，无法匹配Flask路由。需拼接用户参数后再发起请求：

   methods:{
       getResponse(){
           const usr = "test_user"; // 替换为实际用户数据，比如从表单/状态中获取
           const path = `http://127.0.0.1:5000/results/${usr}`;
           axios.get(path)
           .then((res) => {
               console.log("I am reading this");
               console.log(res.data);
           })
           .catch((err) => {
               console.error(err); // 确保错误信息能被打印，方便排查
           });
       },
   }
   

2. 处理跨域问题：
   若Vue运行在和Flask不同的端口（比如8080），必须在Flask端配置CORS（见上方Flask代码中的CORS(app)），否则浏览器会拦截跨域请求；Postman虽不受跨域限制，但路由错误仍会导致请求失败。

额外排查点 #

• 用Postman测试正确的URL：比如请求http://127.0.0.1:5000/results/test_user，确认是否返回预期内容。
• 检查Flask服务是否正常运行，Python控制台有无报错。
• 打开浏览器开发者工具的Network标签页，查看请求的状态码和响应内容，定位具体错误。

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