Il est temps d'ajouter les fonctionnalités dont notre application front-end a besoin, et de regarder le système complet prendre forme !
Votre application front-end doit s'exécuter dans un navigateur. Exécutez donc npm run start à partir du répertoire front-end, accédez à http://localhost:4200 avec votre navigateur puis cliquez sur « Parties 1 + 2 ».
Remettre des articles en vente
Comme vous avez pu le remarquer, l'application front-end affiche actuellement un spinner et indique une erreur dans la console. Cela est dû au fait qu'elle tente d'accéder à notre API (qui n'existe pas encore !) et de récupérer les articles en vente. Essayons de rendre ces articles accessibles.
Dans votre fichier app.js , remplacez tout le middleware par le suivant :
app.use('/api/stuff', (req, res, next) => {
const stuff = [
{
_id: 'oeihfzeoi',
title: 'Mon premier objet',
description: 'Les infos de mon premier objet',
imageUrl: 'https://cdn.pixabay.com/photo/2019/06/11/18/56/camera-4267692_1280.jpg',
price: 4900,
userId: 'qsomihvqios',
},
{
_id: 'oeihfzeomoihi',
title: 'Mon deuxième objet',
description: 'Les infos de mon deuxième objet',
imageUrl: 'https://cdn.pixabay.com/photo/2019/06/11/18/56/camera-4267692_1280.jpg',
price: 2900,
userId: 'qsomihvqios',
},
];
res.status(200).json(stuff);
});La première différence que vous remarquerez est l'argument supplémentaire passé à la méthode use : nous lui passons un string, correspondant à la route pour laquelle nous souhaitons enregistrer cet élément de middleware. Dans ce cas, cette route serahttp://localhost:3000/api/stuff , car il s'agit de l'URL demandée par l'application front-end.
Dans ce middleware, nous créons un groupe d'articles avec le schéma de données spécifique requis par le front-end. Nous envoyons ensuite ces articles sous la forme de données JSON, avec un code 200 pour une demande réussie.
Si vous effectuez une demande GET vers cette route (aussi appelée endpoint) à partir de Postman, vous verrez que vous recevrez le groupe de stuff , mais que l'actualisation du navigateur ne semble pas fonctionner. Que se passe-t-il donc exactement ici ?
Erreurs de CORS
CORS signifie « Cross Origin Resource Sharing ». Il s'agit d'un système de sécurité qui, par défaut, bloque les appels HTTP entre des serveurs différents, ce qui empêche donc les requêtes malveillantes d'accéder à des ressources sensibles. Dans notre cas, nous avons deux origines : localhost:3000 et localhost:4200 , et nous souhaiterions qu'elles puissent communiquer entre elles. Pour cela, nous devons ajouter des headers à notre objet response .
De retour au fichier app.js , ajoutez le middleware suivant avant la route d'API :
app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content, Accept, Content-Type, Authorization');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH, OPTIONS');
next();
});Ces headers permettent :
d'accéder à notre API depuis n'importe quelle origine (
'*') ;d'ajouter les headers mentionnés aux requêtes envoyées vers notre API (
Origin,X-Requested-With, etc.) ;d'envoyer des requêtes avec les méthodes mentionnées (
GET,POST, etc.).
Comme vous pouvez le voir dans le code, le middleware ne prend pas d'adresse en premier paramètre, afin de s'appliquer à toutes les routes. Cela permettra à toutes les demandes de toutes les origines d'accéder à votre API. Vous pouvez également ajouter des URL d'images valides aux stuff renvoyés par l'API, en terminant la route GET. Si vous actualisez à présent l'application front-end, vous devriez voir vos articles en vente :
Maintenant que vous avez correctement implémenté une route basique pour remettre les stuff en vente, voyons comment autoriser les utilisateurs à proposer leurs propres articles à la vente.
En résumé
La méthode
app.use()vous permet d'attribuer un middleware à une route spécifique de votre application.Le CORS définit comment les serveurs et les navigateurs interagissent, en spécifiant quelles ressources peuvent être demandées de manière légitime – par défaut, les requêtes AJAX sont interdites.
Pour permettre des requêtes cross-origin (et empêcher des erreurs CORS), des headers spécifiques de contrôle d'accès doivent être précisés pour tous vos objets de réponse.
Maintenant que nous avons créé notre route Get, nous allons créer une route Post, dans le chapitre suivant !
