• 10 hours
  • Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 3/13/20

Créez une route GET

Log in or subscribe for free to enjoy all this course has to offer!

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 ng serve à 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 d'être effectués 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.

Example of certificate of achievement
Example of certificate of achievement