Vue向Python后端API传递JWT令牌时持续返回422错误，求排查原因

看起来你遇到了JWT令牌传递时的422 Unprocessable Entity错误，我来帮你一步步拆解可能的问题：

1. JWT令牌格式与后端期望不匹配 #

你后端用的是@jwt_required()（应该是Flask-JWT-Extended库），这个库默认要求Authorization头的格式为Bearer <token>，但你第一段Vue代码里写的是JWT ${token}，第二段才改成Bearer ${token}。

要确认后端的配置：如果后端设置了app.config['JWT_HEADER_TYPE'] = 'JWT'，那前端必须用JWT开头；如果没配置这个参数，默认是Bearer，那前端用Bearer才是对的。前后端的头类型必须完全一致，否则后端会无法解析令牌，返回422错误。

2. 跨域（CORS）配置缺失导致请求头被拦截 #

因为前端Vue和后端Flask运行在不同端口（比如前端8080、后端5000），跨域场景下浏览器会先发送OPTIONS预检请求，如果后端没正确配置CORS，会拦截带Authorization头的请求，或者导致请求格式被篡改，最终返回422。

你需要在后端添加Flask-CORS配置，确保允许自定义头和凭证：

from flask_cors import CORS
# 允许前端地址跨域，同时支持凭证和Authorization头
CORS(app, supports_credentials=True, 
     origins="http://localhost:8080",  # 替换成你的Vue运行地址
     allow_headers=["Authorization"])

3. JWT令牌本身无效或解析失败 #

虽然你用console.log输出了token，但要确认令牌本身是否有效：

• 把token复制到jwt.io解析，检查：
  • 签名是否匹配后端的JWT_SECRET_KEY
  • 令牌是否过期（看exp字段是否在当前时间之后）
  • Payload里是否包含id字段（后端代码里用到了current_user['id']，如果令牌里没有这个字段，解析后会抛出错误）
• 注意令牌有没有多余的空格、引号或转义字符，比如Cookies存储时是否被意外截断或修改

4. 后端JWT验证阶段的错误未被捕获 #

422错误通常是请求格式不符合后端要求，你可以在后端添加JWT错误处理的日志，明确问题所在：

from flask_jwt_extended import JWTManager

jwt = JWTManager(app)

# 捕获无效令牌错误
@jwt.invalid_token_loader
def invalid_token_callback(error):
    app.logger.error(f"JWT验证失败: {error}")
    return jsonify({"error": "无效令牌", "message": str(error)}), 422

# 捕获缺失令牌错误
@jwt.unauthorized_loader
def missing_token_callback(error):
    app.logger.error(f"请求缺少令牌: {error}")
    return jsonify({"error": "缺少令牌", "message": str(error)}), 401

添加后查看后端日志，就能直接看到JWT验证时的具体错误信息。

5. 前端请求头未正确发送 #

打开浏览器开发者工具的Network标签，查看/user_info请求的Request Headers：

• 确认Authorization头存在，格式是Bearer <token>或JWT <token>（和后端配置一致）
• 确认token和你console.log输出的完全一致，没有被篡改

快速排查步骤 #

1. 先统一前后端的Authorization头格式（比如都用Bearer）
2. 检查后端CORS配置是否允许Authorization头和跨域凭证
3. 用jwt.io验证token的有效性和内容
4. 查看后端JWT验证的错误日志，定位具体问题

备注：内容来源于stack exchange，提问作者santeri pohjaranta