Why am I receiving a 422 error when sending a JWT token from Vue to my Python API?

I'm trying to send an access_token from my Vue template to my Python API, yet I get a 422 error. What could be causing this issue?

I'm sending the JWT token using the following Vue code:

JAVASCRIPTCopied
const response = await axios.get('http://127.0.0.1:5000/user_info', {
   headers: {
      Authorization: `JWT ${Cookies.get('access_token')}`
   }
});

Here is the Python API code where the JWT token is processed:

PYTHONCopied
@app.route('/user_info', methods=['GET'])
@jwt_required()
def user_info():
    current_user = get_jwt_identity()
    app.logger.info(f"Current user: {current_user}") 
    db = connection_pool.get_connection()
    cursor = db.cursor(dictionary=True)

    try:
        cursor.execute("SELECT name, surname, email FROM client_data WHERE id = %s", (current_user['id'],))
        user_info = cursor.fetchone()
        app.logger.info(f"User info: {user_info}")  # Log the user info for debugging
        return jsonify(user_info), 200
    except mysql.connector.Error as err:
        app.logger.error(f"Error fetching user info: {err}")  # Log the error for debugging
        return jsonify({"error": str(err)}), 500
    finally:
        cursor.close()
        db.close()

Additionally, part of the Vue code also sends the JWT token as follows:

JAVASCRIPTCopied
let token = Cookies.get('access_token');
if (token) {
   token = token.toString();
   console.log('Token:', token);
   try {
      const response = await 
      axios.get('http://127.0.0.1:5000/user_info', {
            headers: {
              Authorization: `Bearer ${token}`
            }
          });
          this.user = response.data;
     } catch (error) {
          console.error('Error fetching user info:', error);
  }
}

I suspect it might be related to a mismatch in the token prefix or possibly a misconfiguration in the backend, as one snippet uses 'JWT' while the other uses 'Bearer'.