Les outils et méthodes populaires pour simuler les demandes d'origine intermédiaire dans les environnements de développement locaux tournent principalement sur la manipulation et le contournement des restrictions de partage de ressources croisées (CORS) imposées par les navigateurs. Ces outils aident les développeurs à tester et à déboguer les interactions d'origine intermédiaire en activant les COR sur des serveurs locaux, en utilisant des proxys ou en tirant parti des extensions et des configurations du navigateur. Vous trouverez ci-dessous des informations détaillées sur certaines approches et outils courants utilisés à cet effet.
Comprendre les cors
Le partage de ressources croisées (CORS) est un mécanisme de sécurité implémenté dans les navigateurs qui restreignent les applications Web exécutées sur une seule origine (domaine, protocole, port) d'accès aux ressources sur une origine différente, sauf si le serveur le permet explicitement via des en-têtes HTTP spécifiques. CORS fonctionne par des serveurs qui envoient des en-têtes comme «Access-Control-Allow-Origin» pour indiquer quels domaines sont autorisés à accéder aux ressources. Les navigateurs appliquent cela en envoyant une demande "Français" (une demande d'options HTTP) pour certains types d'appels d'origine transversale pour vérifier les autorisations avant de faire la demande réelle. Les en-têtes COR contrôlent non seulement les origines autorisées, mais aussi quelles méthodes et en-têtes HTTP peuvent être utilisés, et si des informations d'identification comme les cookies peuvent être envoyées.
Défis de développement locaux
Pendant le développement local, les projets se déroulent souvent sur différents ports ou domaines locaux, ce qui compte comme des origines et déclenche des restrictions CORS, ce qui rend difficile les demandes d'origine croisée des tests. Les développeurs ont besoin d'outils ou de configurations qui simulent ou contournent ces restrictions localement pour permettre à leur front-end et à l'arrière-end de communiquer correctement sans affecter les environnements de production.
Outils et méthodes de simulation ou de contournement CORS localement
1. Proxing du serveur local
Le proxyage est l'une des solutions les plus robustes et les plus utilisées. Il implique l'exécution d'un serveur proxy qui agit comme un intermédiaire entre le client et le serveur API, achetant efficacement les demandes d'origine transversale via la même origine pour éviter les problèmes de COR.
- Serveurs de développement avec support proxy intégré: de nombreux outils de développement frontaux comme Vite, WebPack Dev Server ou créent une prise en charge de l'application React Configuration d'un proxy. Par exemple, Creater React App permet aux développeurs de définir un proxy dans `package.json` ou` setupproxy.js` qui transfère les appels de l'API vers un autre serveur exécutant sur un port ou un domaine différent. De cette façon, le navigateur pense qu'il communique avec la même origine car les demandes sont faites au serveur de développement lui-même, qui les transmet ensuite au serveur API cible.
- Serveurs de proxy autonome: des outils comme HTTP-Proxy-Middleware (pour Node.js) ou des proxys locaux comme Nginx configuré sur les machines locales peuvent servir de proxys pour acheminer les demandes et ajouter des en-têtes COR nécessaires. Les développeurs peuvent configurer ces serveurs pour modifier les réponses à la volée pour inclure «Access-Control-Allow-Origin: *» ou d'autres en-têtes appropriés.
2. Copies API locales compatibles avec CORS
L'exécution d'une instance locale de l'API qui prend en charge les COR est une autre approche efficace. En utilisant Docker ou des configurations locales, les développeurs exécutent l'API sur leurs machines avec des COR activés en mode de développement, ce qui permet à la fonction frontale de fonctionner sur localhost de communiquer librement sans restrictions. Cela présente les avantages d'un contrôle complet et aucune dépendance aux environnements externes.
3. Extensions de navigateur pour le développement
Pour des tests ou un débogage rapides, de nombreux développeurs utilisent temporairement des extensions de navigateur qui désactivent ou modifient temporairement le comportement des COR dans les navigateurs. Ces outils ne doivent être utilisés que dans le développement, jamais en production:
- CORS Unblock pour Chrome: cette extension modifie les en-têtes de demande et permet les demandes d'origine croisée en injectant les en-têtes nécessaires sur les réponses pour contourner l'application CORS du navigateur.
- CORS Everywhere pour Firefox: similaire à l'extension de Chrome, il bascule les restrictions COR et désactivés, permettant aux développeurs de tester les appels d'origine croisée sans modifier les configurations de serveur.
- Le menu de développement de Safari: Safari permet de désactiver temporairement les restrictions d'origine transversale via le menu, utile pour les utilisateurs de Mac effectuant des tests locaux.
4. Exécution d'un serveur Web local au lieu d'ouvrir des fichiers
Une cause première des erreurs CORS consiste à charger des fichiers directement avec le protocole `fichier: //` dans les navigateurs. De nombreux didacticiels et Q&R soulignent que l'ouverture des pages HTML directement sans serveur Web déclenche les erreurs CORS car les navigateurs bloquent de nombreuses opérations pour la sécurité. Ainsi, l'exécution d'un serveur HTTP local minimal à l'aide d'outils comme le serveur HTTP intégré de Python (`Python3 -M Http.Server`), le package` HTTP-Server` de Node, ou Live-Server, permet d'origine locale correct et évite ces erreurs.
5. Modification des en-têtes de réponse du serveur
Lorsque vous développez votre propre API ou votre service backend, l'ajout d'en-têtes CORS est généralement effectué en incluant middleware ou en configurant le serveur Web pour prendre en charge CORS. Les cadres et langues backend populaires ont établi des moyens de permettre les COR:
- Node.js / Express: L'utilisation du package middleware «CORS» simplifie l'ajout d'en-têtes CORS.
- ASP.NET Web API: prend en charge les attributs comme `[Immatingecors]` qui permettent de spécifier les origines, les méthodes et les en-têtes autorisés pour les demandes d'origine croisée.
- Django: Middleware comme `Django-Cors-Headers` est utilisé pour activer le support COR localement.
6. contourner les COR avec des proxys publics ou tiers
Certains services en ligne comme Beeceptor permettent aux développeurs de tester les API et de contourner les COR en acheminant les demandes via leurs serveurs proxy. Ces services ajoutent les en-têtes CORS appropriés, donc les navigateurs acceptent les réponses. Cette approche est utile pour un débogage rapide lorsque la configuration locale n'est pas possible mais doit être utilisée avec prudence et non dans les environnements de production.
***
Résumé des outils et techniques populaires
- Dev Server Proxying: Utilisation de capacités proxy dans des outils comme VITE, créez une application React, WebPack Dev Server.
- Serveurs de proxy locaux: http-proxy-middleware dans node.js, nginx configuré comme proxy.
- API local avec CORS activé: exécution des conteneurs Docker ou des instances d'API locales configurées pour le développement avec CORS.
- Extensions du navigateur: CORS Unblock (Chrome), CORS Everywhere (Firefox), Safari Désactiver les restrictions d'origine intermédiaire.
- Server HTTP local: exécuter `http.server` de Python,` http-server »de Node ou en direct au lieu d'utiliser` file: // `urls.
- Backend Framework Middleware: `CORS` Package pour node.js,` [activableCors] `Dans ASP.NET Web API,` Django-Cors-Headers` pour Django.
- Services proxy tiers: beeceptor et services similaires pour contourner temporairement les COR.