JavaScript Fetch : Requêtes interorigines (CORS)

Les requêtes interorigines sont une partie essentielle du développement web moderne, permettant l'interaction entre des ressources provenant de différentes origines. Dans cet article, nous approfondirons la gestion des requêtes interorigines à l'aide de l'API Fetch en JavaScript. À la fin, vous aurez une compréhension complète des requêtes interorigines, de leur configuration et des meilleures pratiques pour utiliser l'API Fetch afin de les gérer efficacement.

Comprendre les requêtes interorigines

Les requêtes interorigines se produisent lorsqu'une application web demande des ressources à une origine différente de la sienne (domaine, protocole ou port). Ces requêtes sont cruciales pour accéder aux API, récupérer des données depuis des sources externes et intégrer des services tiers.

L'importance du CORS

Le Cross-Origin Resource Sharing (CORS) est une fonctionnalité de sécurité implémentée par les navigateurs pour contrôler la manière dont les pages web peuvent demander des ressources à différentes origines. Les politiques CORS sont appliquées par le serveur via des en-têtes HTTP spécifiques.

Utiliser Fetch pour les requêtes interorigines

L'API Fetch offre une méthode moderne et flexible pour effectuer des requêtes HTTP en JavaScript. Elle prend en charge les promesses, ce qui facilite le travail avec le code asynchrone.

Utilisation de base de Fetch

Commençons par un exemple simple d'utilisation de Fetch pour effectuer une requête GET. Vous pouvez en apprendre beaucoup à ce sujet sur notre page précédente, API Fetch.

---

Output appears here after Run.

Gérer le CORS avec Fetch

Lors de l'envoi de requêtes interorigines, le serveur doit inclure des en-têtes spécifiques pour autoriser la requête. Les en-têtes essentiels incluent :

• Access-Control-Allow-Origin : Spécifie quelles origines sont autorisées à accéder à la ressource.
• Access-Control-Allow-Methods : Liste les méthodes HTTP autorisées pour les requêtes interorigines.
• Access-Control-Allow-Headers : Liste les en-têtes qui peuvent être inclus dans la requête.

Effectuer des requêtes interorigines

Pour effectuer une requête interorigines avec Fetch, vous pouvez définir l'option mode sur cors. C'est le mode par défaut pour les requêtes interorigines. Il permet d'effectuer la requête si le serveur l'autorise explicitement via des en-têtes CORS. Voici un exemple :

WARNING

Sur votre serveur, évitez d'utiliser un joker (*) pour Access-Control-Allow-Origin en production pour des raisons de sécurité.

---

Output appears here after Run.

Envoyer des identifiants avec Fetch

Si votre requête interorigines nécessite des identifiants (tels que des cookies ou une authentification HTTP), vous devez inclure l'option credentials :

---

async function fetchWithCredentials(url) {
  try {
    const response = await fetch(url, {
      mode: 'cors',
      credentials: 'include'
    });
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Fetch error:', error);
  }
}

fetchWithCredentials('https://api.crossorigin.com/secure-data');

note

Si une politique CORS bloque la réponse, le navigateur renvoie une réponse opaque. Vous ne pourrez pas lire le statut ou le corps, mais la promesse fetch sera rejetée, ce qui vous permettra de capturer l'erreur dans le bloc catch.

Gérer les requêtes de prévolée

Lors de l'envoi de certains types de requêtes interorigines, le navigateur envoie d'abord une requête OPTIONS (requête de prévolée) au serveur pour déterminer si la requête réelle peut être envoyée en toute sécurité. Cela se produit pour les requêtes qui :

• Utilisent des méthodes autres que GET, HEAD ou POST.
• Incluent des en-têtes personnalisés.
• Utilisent l'en-tête Content-Type avec des valeurs autres que application/x-www-form-urlencoded, multipart/form-data ou text/plain.

Si la prévolée échoue, le navigateur génère une erreur réseau au lieu de renvoyer un code de statut HTTP standard. Cela signifie que l'erreur sera capturée dans le bloc catch, et non gérée par response.ok.

Bonnes pratiques pour les requêtes Fetch interorigines

Sécurisez votre API

Assurez-vous que votre API est sécurisée en validant et en nettoyant toutes les données entrantes. Utilisez HTTPS pour chiffrer les données en transit et mettez en place des mécanismes d'authentification et d'autorisation appropriés.

Utilisez des en-têtes CORS appropriés

Configurez votre serveur pour inclure les en-têtes CORS nécessaires. Évitez d'utiliser un joker (*) pour Access-Control-Allow-Origin en production. Spécifiez plutôt les origines exactes qui sont autorisées.

Gérez les erreurs avec élégance

Mettez en place une gestion d'erreurs robuste pour fournir des retours significatifs aux utilisateurs et consigner les erreurs à des fins de débogage.

Optimisez les performances

Minimisez le nombre de requêtes interorigines en combinant les ressources lorsque cela est possible et en utilisant la mise en cache pour réduire les temps de chargement.

Conclusion

Maîtriser les requêtes interorigines avec l'API Fetch est essentiel pour le développement web moderne. En comprenant comment configurer et gérer ces requêtes, vous pouvez créer des applications web plus sécurisées, efficaces et fiables. Suivez les bonnes pratiques présentées dans cet article pour garantir que vos requêtes interorigines sont gérées correctement et en toute sécurité.