Gardez la clé API dans votre propre API

1. Pourquoi ajouter un serveur ?

Une clé API ne doit pas arriver dans le navigateur. Elle serait visible par toute personne qui ouvre les outils de développement. Le client Vue ne connaît donc que la route /training/api/notes, sur son propre serveur local.

Flask reçoit cette requête sur le port 5173, crée une nouvelle requête vers Odoo sur le port 8069, puis ajoute la clé Bearer. C’est un relais applicatif : il expose une petite API choisie par vous et garde le secret côté serveur.

2. Utilisez le serveur fourni

Le dossier workspace/day4-notes-local-server/ contient le serveur Flask et une version compilée du client Vue. Créez .env.local à partir de .env.example, puis collez votre clé API temporaire dans ODOO_API_KEY.

python3 -m venv .venv
.venv/bin/pip install -r requirements.txt
.venv/bin/python app.py

Ouvrez ensuite http://127.0.0.1:5173. Vous retrouvez le client Vue, sa liste et son formulaire, sans lancer Vite.

3. Lisez le relais

Le serveur n’accepte que les deux méthodes utiles pour les notes. Il ne transmet pas les cookies du navigateur et ne laisse pas le client choisir une autre adresse Odoo.

@app.route(NOTES_PATH, methods=["GET", "POST"])
def notes_api():
    headers = {
        "Accept": "application/json",
        "Authorization": f"Bearer {api_key}",
    }
    # Pour POST, Flask lit le JSON puis le recrée dans body.
    upstream_request = Request(
        odoo_url(),
        data=body,
        headers=headers,
        method=request.method,
    )
    with urlopen(upstream_request, timeout=10) as upstream_response:
        return Response(
            upstream_response.read(),
            status=upstream_response.status,
            mimetype="application/json",
        )

Pour une réponse JSON, le serveur renvoie au navigateur le corps et le statut produits par Odoo. Si Odoo produit sa page HTML standard pour un refus, Flask garde le statut mais la remplace par une petite erreur JSON afin que Vue puisse l’afficher.

4. Suivez une seule création

Créez une note depuis la page, puis observez les deux appels dans les logs Flask : le navigateur envoie un POST à Flask, puis Flask envoie un POST à Odoo. La note créée apparaît dans Vue et dans Notes de formation → Notes.