Comment résoudre les erreurs CORS à partir de mon API Gateway ?

Dernière mise à jour : 27/01/2021

J'obtiens l'erreur « No 'Access-Control-Allow-Origin' header is present on the requested resource » (Aucun en-tête Access-Control-Allow-Origin présent dans la ressource demandée) lorsque j'essaie d'appeler mon API Amazon API Gateway. Comment résoudre cette erreur ?

Brève description

Des erreurs de partage des ressources entre origines (CORS, Cross-Origin Resource Sharing) se produisent lorsqu'un serveur ne renvoie pas les en-têtes HTTP requis par la norme CORS. Pour résoudre une erreur CORS à partir d'une API API Gateway REST ou API HTTP, reconfigurez l'API pour qu'elle réponde à la norme CORS.

Pour plus d'informations sur l'activation CORS pour les API REST, consultez Activation CORS pour une ressource API REST. Pour les API HTTP, consultez Configuration de CORS pour une API HTTP.

Remarque : CORS doit être activé au niveau des ressources et peut être géré à l'aide de configurations API Gateway ou d'intégrations back-end, comme AWS Lambda.

Résolution

L'exemple suivant montre comment résoudre l'erreur CORS Aucun en-tête « Access-Control-Allow-Origin » présent. Toutefois, vous pouvez utiliser une procédure similaire pour résoudre toutes les erreurs CORS. Par exemple : les erreurs Méthode non prise en charge sous l'en-tête « Access-Control-Allow-Methods » erreurs d'en-tête et les erreurs Aucun en-tête « Access-Control-Allow-Headers » présent.

Remarque : l'erreur Aucun en-tête « Access-Control-Allow-Origin » présent peut se produire pour l'une des raisons suivantes :

  • L'API n'est pas configurée avec une méthode OPTIONS qui renvoie les en-têtes CORS requis.
  • Un autre type de méthode (tel que GET, PUT ou POST) n'est pas configuré pour renvoyer les en-têtes CORS requis.
  • Une API avec intégration proxy ou intégration non-proxy n'est pas configurée pour renvoyer les en-têtes CORS requis.
  • Pour une API REST privée, l'URL d'appel incorrecte est appelée ou le trafic n'est pas acheminé vers le point de terminaison Virtual Private Cloud (VPC) de l'interface.

Confirmer la cause de l'erreur

Il existe deux façons de confirmer la cause d'une erreur CORS depuis API Gateway :

  • Créez un fichier d'archive HTTP (HAR) lorsque vous appelez votre API. Ensuite, confirmez la cause de l'erreur dans le fichier en vérifiant les en-têtes dans les paramètres renvoyés dans la réponse API.
  • Utilisez les outils de développement de votre navigateur pour vérifier les paramètres de demande et de réponse provenant de la demande d'API qui a échoué.

Activez CORS sur votre ressource API qui rencontre l'erreur

Pour les API REST, consultez Activer CORS sur une ressource à l'aide de la console API Gateway. Pour les API HTTP, consultez Configuration de CORS pour une API HTTP.

Important : si vous configurez CORS pour une API HTTP, API Gateway envoie alors automatiquement une réponse aux requêtes OPTIONS en amont, même s'il n'y a pas de route OPTIONS configurée pour votre API. Pour une requête CORS, API Gateway ajoute les en-têtes CORS configurés à la réponse d'une intégration.

Tout en activant CORS, assurez-vous que vous effectuez les opérations suivantes :

  • Pour les réponses de passerelle pour l'API <nom-api>, cochez les cases DEFAULT 4XX et DEFAULT 5XX.

Remarque : lorsque vous sélectionnez ces options par défaut, API Gateway répond avec les en-têtes CORS requis, même lorsqu'une requête n'atteint pas le point de terminaison. Par exemple, si une demande inclut un chemin de ressource incorrect, API Gateway répond toujours avec une erreur 403 « Missing Authentication Token ».

  • Pour les méthodes, cochez la case de la méthode OPTIONS si elle n'est pas déjà sélectionnée. Cochez également les cases pour toutes les autres méthodes disponibles pour les demandes CORS. Par exemple : GET, PUT et POST.

Remarque : l'activation de CORS dans la console API Gateway ajoute une méthode OPTIONS à la ressource si elle n'existe pas déjà. Elle configure également la réponse 200 de la méthode OPTIONS avec les en-têtes Access-Control-Allow-* requis. Si vous avez déjà activé CORS à l'aide de la console, cette activation remplace à nouveau les valeurs existantes.

Configurez vos intégrations d'API REST pour renvoyer les en-têtes CORS requis

Configurez votre fonction principale AWS Lambda ou votre serveur HTTP pour envoyer les en-têtes CORS requis dans sa réponse. Pour renvoyer une liste de domaines dans Access-Control-Allow-Origin, vous devez configurer votre backend pour envoyer les noms de domaine dans une liste en tant que valeur de l'en-tête Access-Control-Allow-Origin.

Important : si vous utilisez une intégration proxy, vous ne pouvez pas configurer de réponse d'intégration dans API Gateway pour modifier les paramètres de réponse renvoyés par le backend de votre API. Dans une intégration proxy, API Gateway transfère la réponse backend directement au client.

Si vous utilisez une intégration non proxy, configurez manuellement une réponse d'intégration dans API Gateway pour renvoyer les en-têtes CORS requis.

Remarque : pour les API avec une intégration non proxy, l'activation de CORS sur une ressource à l'aide de la console API Gateway ajoute automatiquement les en-têtes CORS requis à la ressource.

Vérifiez le paramètre DNS privé de votre point de terminaison d'interface (pour les API REST privées uniquement)

Pour les API REST privées, déterminez si le DNS privé est activé pour le point de terminaison VPC de l'interface associé.

Si le DNS privé est activé pour le point de terminaison de l'interface, appelez votre API privée depuis votre Amazon Virtual Private Cloud (Amazon VPC) en utilisant le nom DNS privé pour éviter les erreurs CORS.

Si le DNS privé n'est pas activé, acheminez manuellement le trafic depuis l'URL d'appel vers les adresses IP du point de terminaison du VPC.

Remarque : utilisez l'URL d'appel suivante, que le DNS privé soit activé ou non : https://api-id.execute-api.region.amazonaws.com/stage-name. Assurez-vous de remplacer les valeurs pour api-id, regionet stage-name par les valeurs requises pour votre API. 

Pour plus d'informations, consultez la rubrique Procédure d'appel d'une API privée.

Important : si CORS est activé lorsque le DNS privé n'est pas activé, souvenez-vous des limitations suivantes :

  • Vous ne pouvez pas utiliser de noms DNS publics spécifiques aux points de terminaisonpour accéder à votre API privée depuis votre Amazon VPC.
  • Vous ne pouvez pas utiliser l'option d'en-tête Host, car les requêtes provenant d'un navigateur n'autorisent pas la manipulation de l'en-tête Host.
  • Vous ne pouvez pas utiliser l'en-tête personnalisé x-apigw-api-id, car il déclenche une requête OPTIONS en amont qui n'inclut pas l'en-tête. Les appels d'API qui utilisent l'en-tête x-apigw-api-id n'atteindront pas votre API.

Cet article vous a-t-il été utile ?


Besoin d'aide pour une question technique ou de facturation ?