Comment intégrer une requête CORS dans un header avec Angular ?

Comment intégrer une requête CORS dans un header avec Angular ? Il est possible d'effectuer des requêtes Cross-Origin avec le framework Angular. Il faut d'abord que le serveur qui reçoit ses requêtes l'y autorise pour pouvoir ensuite en envoyer.

Une requête cross-origin est un mécanisme permettant à un site internet de charger une ressource située depuis un autre domaine que celui dans lequel est situé le site. Ce mécanisme est strictement encadré pour des raisons de sécurité. Il est possible d'effectuer des requêtes Cross-Origin avec le framework Angular. Il faut d'abord que le serveur qui reçoit ses requêtes l'y autorise pour pouvoir ensuite en envoyer.

L'en-tête "Access-Control-Allow-Origin"

La première étape pour pouvoir utiliser les requêtes CORS se situe au niveau du serveur qui héberge le site internet auquel on veut accéder. Celui-ci doit autoriser les requêtes CORS en envoyant certains en-têtes. L'en-tête "Access-Control-Allow-Origin" indique les domaines autorisés à effectuer des requêtes. On peut indiquer un ou plusieurs domaines, ou bien le caractère "*" qui autorise les requêtes provenant de n'importe quel domaine.

//Seul le site "www.monsite.fr" peut interagir auprès du site distant
Access-Control-Allow-Origin: http://www.monsite.fr
//Tout le monde peut effectuer des requêtes
Access-Control-Allow-Origin: *

Il existe deux autres en-têtes pour paramétrer plus précisément l'accès. L'en-tête "Access-Control-Allow-Methods" est utilisé pour indiquer quels types de requêtes sont autorisés. On peut indiquer un ou plusieurs types de requêtes séparés par une virgule. L'en-tête "Access-Control-Request-Headers" permet d'autoriser des en-têtes spécifiques dans les requêtes CORS, en plus des en-têtes de base autorisés par défaut.

//On ne peut ici qu'utiliser les méthodes de type "GET" pour récupérer des données
Access-Control-Allow-Methods: GET
//Ajout d'un en-tête spécifique autorisé dans les requêtes
Access-Control-Request-Headers: mon-entete-personnalise

"HTTPClientModule", "HTTPClient" et "HTTPHeaders"

Une fois que le serveur autorise les requêtes, on peut développer la partie "client". Avec le framework Angular, il faut utiliser les modules "HTTPClientModule", "HTTPClient" et "HTTPHeaders". Il faut dans sa requête indiquer l'URL du site. Il faudra bien sûr utiliser seulement le type de requête autorisé par le serveur et indiquer si besoin les en-têtes demandés. Il faut pour cela connaître la documentation du site en question.

import { HttpClient, HttpHeaders, HttpClientModule } from '@angular/common/http';
const optionRequete = {
  headers: new HttpHeaders({ 
    'Access-Control-Allow-Origin':'*',
    'mon-entete-personnalise':'maValeur'
  })
};
public baseurl = 'http://urlDuSite';
userAPI(data): Observable<any> {
  return this.http.get(this.baseurl, data, httpOptions)
    .pipe(
      tap((resultat) => console.log("Résultat de la requête : ",resultat)),
      catchError(this.handleError('erreur lors de la requête CORS', []))
    );
}

AngularJS