Exercice - Configurer CORS

  • 3 minutes

Dans cet exercice, vous allez configurer le partage des ressources cross-origin (CORS) dans votre Azure Functions local et vous pourrez observer l’application Product Manager en action.

Configuration de CORS

  1. Ouvrez le fichier api/local.settings.json .

  2. Ajoutez une section « Host » sous la propriété « Values ». Définissez la valeur « CORS » dans la section « Host » sur « * ».

    {
  "IsEncrypted": false,
  "Values": {
    "AzureWebJobsStorage": "",
    "FUNCTIONS_WORKER_RUNTIME": "node",
     "AzureWebJobsFeatureFlags": "EnableWorkerIndexing",
    "CONNECTION_STRING": "PASTE YOUR CONNECTION STRING HERE"
  },
  "Host": {
    "CORS": "*"
  }
}

  3. Si l’API est toujours en cours d’exécution, redémarrez le processus en sélectionnant Déconnexion dans la barre de débogage, puis en appuyant sur F5 pour le redémarrer.

Vérifier l’application front-end

  1. L’application front-end doit toujours être en cours d’exécution dans un onglet de navigateur sur le port 5000. Actualisez la page.

  2. L’application charge les données depuis l’API.

    Capture d’écran d’un navigateur web montrant l’application Products Manager avec des données.

  3. Pour vérifier que tous les points de terminaison fonctionnent, essayez de créer, mettre à jour et supprimer des produits.

Cette application semble fonctionner correctement. Elle fonctionne même très bien. Rien de tout cela ne serait possible sans votre remarquable API. Prêt à tester ce que vous avez appris ?