Guide débutant sur le CORS - HTML

Salut les futurs développeurs web ! Aujourd'hui, nous allons entreprendre un voyage passionnant à la découverte du CORS. Ne vous inquiétez pas si vous n'en avez jamais entendu parler auparavant - à la fin de ce tutoriel, vous serez un expert en CORS ! Alors, prenez votre boisson favorite, installez-vous confortablement, et plongeons dedans !

HTML - Web CORS

Qu'est-ce que le CORS ?

CORS signifie Cross-Origin Resource Sharing (partage des ressources entre origines). Je sais que cela peut sembler compliqué, mais laissez-moi vous l'expliquer avec une analogie amusante.

Imaginez que vous êtes dans un restaurant chic (cest votre navigateur), et que vous souhaitez commander de la nourriture à un autre restaurant de lautre côté de la rue (cest un autre site web). D'habitude, le restaurant chic ne vous permettra pas de faire cela, car ils veulent que vous mangiez leur nourriture uniquement. Mais avec le CORS, c'est comme si le restaurant chic disait : "Eh bien, allez-y, commandez de lautre côté de la rue !" C'est une manière pour les navigateurs de permettre en toute sécurité aux sites web de demander des ressources à dautres sites web.

Pourquoi avons-nous besoin du CORS ?

Au début de l'ère d'Internet, les navigateurs avaient une politique de sécurité stricte appelée la Politique de même origine. Cette politique empêchait les sites web de faire des requêtes vers d'autres domaines, ce qui était excellent pour la sécurité mais pas si bon pour la fonctionnalité.

À mesure que le web évoluait, les développeurs avaient besoin d'un moyen de faire des requêtes inter-origines en toute sécurité. C'est là que le CORS est intervenu, en offrant une méthode sécurisée pour les serveurs pour assouplir la Politique de même origine et permettre certaines requêtes inter-origines.

Comment le CORS fonctionne ?

Le CORS fonctionne par le biais d'une série d'en-têtes HTTP. Lorsqu'une page web fait une requête vers un domaine différent, le navigateur ajoute un en-tête spécial appelé Origin à la requête. Le serveur répond alors avec des en-têtes qui indiquent au navigateur si la requête est autorisée.

Voici un exemple simple :

<!DOCTYPE html>
<html>
<head>
<title>Exemple CORS</title>
</head>
<body>
<h1>CORS en action</h1>
<button onclick="makeRequest()">Faire une requête</button>

<script>
function makeRequest() {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Erreur:', error));
}
</script>
</body>
</html>

Dans cet exemple, lorsque vous cliquez sur le bouton, il essaie de récupérer des données depuis https://api.example.com/data. Si le serveur à api.example.com a le CORS configuré correctement, il inclura des en-têtes dans sa réponse qui permettent à votre page web d'accéder aux données.

Faire une requête CORS

Maintenant, plongeons plus profondément dans la manière de faire une requête CORS. Nous utiliserons l'API Fetch, qui est une manière moderne et puissante de faire des requêtes réseau en JavaScript.

fetch('https://api.example.com/data', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Erreur:', error));

Ce code envoie une requête GET à https://api.example.com/data. La réponse du serveur déterminera si la requête est réussie ou non.

Si le CORS est correctement configuré sur le serveur, vous verrez les données enregistrées dans la console. Si ce n'est pas le cas, vous obtiendrez une erreur CORS, qui pourrait ressembler à ceci :

L'accès à la requête fetch à 'https://api.example.com/data' depuis l'origine 'http://yourwebsite.com' a été bloqué par la politique CORS : Aucun en-tête 'Access-Control-Allow-Origin' n'est présent sur la ressource demandée.

Ne paniquez pas si vous voyez cette erreur ! Cela signifie simplement que le serveur n'est pas configuré pour autoriser les requêtes provenant de votre site web.

Gestion des événements dans le CORS

Lorsque vous travaillez avec le CORS, il est important de gérer à la fois les réponses réussies et les erreurs. Modifions notre exemple précédent pour inclure des gestionnaires d'événements :

<!DOCTYPE html>
<html>
<head>
<title>CORS avec gestionnaires d'événements</title>
</head>
<body>
<h1>CORS avec gestionnaires d'événements</h1>
<button onclick="makeRequest()">Faire une requête</button>
<div id="result"></div>

<script>
function makeRequest() {
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('La réponse réseau nétait pas correcte');
}
return response.json();
})
.then(data => {
document.getElementById('result').textContent = JSON.stringify(data);
})
.catch(error => {
console.error('Erreur:', error);
document.getElementById('result').textContent = 'Une erreur sest produite : ' + error.message;
});
}
</script>
</body>
</html>

Dans cet exemple, nous avons ajouté des gestionnaires d'événements pour les réponses réussies et les erreurs. Si la requête est réussie, nous affichons les données sur la page. Si une erreur se produit, nous affichons un message derreur.

Méthodes CORS

Le CORS prend en charge diverses méthodes HTTP. Voici un tableau résumant les plus courantes :

Méthode	Description
GET	Récupère des données du serveur
POST	Envoie des données au serveur pour créer une nouvelle ressource
PUT	Envoie des données pour mettre à jour une ressource existante sur le serveur
DELETE	Demande la suppression d'une ressource sur le serveur
HEAD	Similaire à GET, mais récupère uniquement les en-têtes, pas le corps
OPTIONS	Utilisé pour décrire les options de communication pour la ressource cible

Souvenez-vous, le serveur doit être configuré pour autoriser ces méthodes pour les requêtes CORS.

Conclusion

Félicitations ! Vous avez刚刚 fait vos premiers pas dans le monde du CORS. Nous avons couvert ce qu'est le CORS, pourquoi il est nécessaire, et comment faire des requêtes CORS de base. Souvenez-vous, le CORS est tout au sujet de rendre le web plus interconnecté tout en maintenant la sécurité.

Alors que vous continuez votre parcours de développement web, vous rencontrerez le CORS dans de nombreuses situations différentes. N'ayez pas peur de ces erreurs CORS - ce sont des occasions d'apprendre davantage sur la manière dont le web fonctionne !

Continuez à pratiquer, restez curieux, et bon codage !

Credits: Image by storyset

Tutoriel précédent:

HTML - Messagerie Web

Tutoriel suivant:

HTML - Web RTC