Comment contourner l’erreur Cross-Origin (CORS) sur Angular en utilisant un proxy ?
Lorsqu’on développe un site Angular qui intègre une Web API, il est fort probable que les 2 sites soient sur des ports différents
Exemple:
Laravel: Port par défaut: 8000
Angular: Port par défaut: 4200
La communication ne peut alors pas fonctionner à cause de la protection Cross-Origin (CORS). Il est possible de désactiver les CORS soit avec une extension ou démarrer chrome en mode non sécurisé, mais ce n’est pas une bonne pratique.
La bonne pratique sur une Application Angular, est de configuré un proxy. C’est très simple.
- La première chose à faire est de créer un fichier proxy.conf.json dans le dossier src
2. Ajouter ce contenu dans le fichier proxy.conf.json
{
“/v1/*”: {
“target”: “https://dev.api.com/api",
“secure”: false,
“logLevel”: “debug”,
“changeOrigin”: true
}
}
3. Modifier le fichier angular.json
Dans l’objet serve vous trouverez l’objet options ajouter cette ligne
“proxyConfig”: “src/proxy.conf.json”
4. Vous pouvez ensuite l’utiliser sur vos services et accéder correctement à l’Api que vous souhaitez
Vous remarquez bien qu’ici on utilise juste v1 suivi de l’uri (route vers l’api)
V1 représente l’alias qu’on avait défini précédemment au niveau du fichier proxy.conf.json
Voilà un moyen simple de contourner les Cross-Origin.
NB: La meilleure façon de gérer les Cross-Origin est de la faire côté serveur.
#angular, #proxy, #cross-origin, #dev #galsen
