Configurer le partage de ressources cross-origin (CORS) pour Azure Container Apps

  • Article

Par défaut, les requêtes effectuées via le navigateur vers un domaine qui ne correspondent pas au domaine d’origine de la page sont bloquées. Pour éviter cette restriction pour les services déployés sur Container Apps, vous pouvez activer CORS.

Cet article explique comment activer et configurer CORS dans votre application conteneur.

Lorsque vous activez CORS, vous pouvez configurer les paramètres suivants :

Paramètre Explication
Autoriser les informations d’identification Indique s’il faut retourner l’en-tête Access-Control-Allow-Credentials .
Âge maximal Configure l’en-tête Access-Control-Max-Age de réponse pour indiquer combien de temps (en secondes) les résultats d’une demande de préversion CORS peuvent être mis en cache.
Origines autorisées Liste des origines autorisées pour les demandes d’origine croisée (par exemple, https://www.contoso.com). Contrôle l’en-tête Access-Control-Allow-Origin de réponse. Permet * d’autoriser tout.
Méthodes autorisées Liste des méthodes de requête HTTP autorisées dans les requêtes inter-origines. Contrôle l’en-tête Access-Control-Allow-Methods de réponse. Permet * d’autoriser tout.
En-têtes autorisés Liste des en-têtes autorisés dans les demandes d’origine croisée. Contrôle l’en-tête Access-Control-Allow-Headers de réponse. Permet * d’autoriser tout.
Exposer des en-têtes Par défaut, tous les en-têtes de réponse ne sont pas exposés au code JavaScript côté client dans une requête cross-origin. Les en-têtes exposés sont des serveurs d’en-têtes supplémentaires peuvent être inclus dans une réponse. Contrôle l’en-tête Access-Control-Expose-Headers de réponse. Permet * d’exposer tout.
Propriété Explication Type
allowCredentials Indique s’il faut retourner l’en-tête Access-Control-Allow-Credentials . boolean
maxAge Configure l’en-tête Access-Control-Max-Age de réponse pour indiquer combien de temps (en secondes) les résultats d’une demande de préversion CORS peuvent être mis en cache. entier
allowedOrigins Liste des origines autorisées pour les demandes d’origine croisée (par exemple, https://www.contoso.com). Contrôle l’en-tête Access-Control-Allow-Origin de réponse. Permet * d’autoriser tout. tableau de chaînes
allowedMethods Liste des méthodes de requête HTTP autorisées dans les requêtes inter-origines. Contrôle l’en-tête Access-Control-Allow-Methods de réponse. Permet * d’autoriser tout. tableau de chaînes
allowedHeaders Liste des en-têtes autorisés dans les demandes d’origine croisée. Contrôle l’en-tête Access-Control-Allow-Headers de réponse. Permet * d’autoriser tout. tableau de chaînes
exposeHeaders Par défaut, tous les en-têtes de réponse ne sont pas exposés au code JavaScript côté client dans une requête cross-origin. Les en-têtes exposés sont des serveurs d’en-têtes supplémentaires peuvent être inclus dans une réponse. Contrôle l’en-tête Access-Control-Expose-Headers de réponse. Permet * d’exposer tout. tableau de chaînes

Pour plus d’informations, consultez la référence du groupe de travail WHATWG (Web Hypertext Application Technology Working Group) sur les réponses HTTP valides à partir d’une demande de récupération.

Activer et configurer CORS

  1. Accédez à votre application conteneur dans le Portail Azure.

  2. Dans le menu paramètres, sélectionnez CORS.

    Screenshot showing how to enable CORS in the Azure portal.

Avec CORS activé, vous pouvez ajouter, modifier et supprimer des valeurs pour les origines autorisées, les méthodes autorisées, les en-têtes autorisés et exposer les en-têtes.

Pour autoriser les valeurs acceptables pour les méthodes, les en-têtes ou les origines, entrez * comme valeur.

Remarque

Mises à jour aux paramètres de configuration via la ligne de commande remplace vos paramètres actuels. Veillez à incorporer vos paramètres actuels dans toutes les nouvelles valeurs CORS que vous souhaitez définir pour vous assurer que votre configuration reste cohérente.

Le code suivant représente le formulaire que vos paramètres CORS prennent dans un modèle ARM lors de la configuration de votre application conteneur.

{ 
  ... 
  "properties": { 
      ... 
      "configuration": { 
         ... 
          "ingress": { 
              ... 
              "corsPolicy": { 
                "allowCredentials": true,
                "maxAge": 5000,
                "allowedOrigins": ["https://example.com"], 
                "allowedMethods": ["GET","POST"], 
                "allowedHeaders": [], 
                "exposeHeaders": []
              } 
          } 
      } 
  } 
}

Étapes suivantes

Configurer l’entrée