Azure Cosmos DB prend désormais en charge le partage des ressources cross-origin (CORS) avec l'en-tête « allowedOrigins » pour notre API SQL principale. Vous pouvez configurer ce paramètre via le portail ou les modèles ARM. Grâce à la prise en charge de CORS, votre application web peut communiquer directement avec Cosmos DB depuis le navigateur, à l'aide de la bibliothèque JavaScript @azure/cosmos, ce qui renforce l'expérience utilisateur en évitant un saut supplémentaire via un niveau intermédiaire.

Qu’est-ce qu’Azure Cosmos DB ?

Azure Cosmos DB est un service de base de données multimodèle distribué globalement qui vous permet de lire et d'écrire des données dans n'importe quelle région Azure. Il offre une distribution mondiale clé en main, garantit des latences à un chiffre en millisecondes au 99e centile et une mise à l’échelle élastique du débit et du stockage.

Pour l'API SQL principale Azure Cosmos DB, nous proposons une bibliothèque JavaScript qui fonctionne dans Node.js et les environnements de navigateur. Cette bibliothèque peut désormais tirer parti de la prise en charge de CORS. Cette fonctionnalité ne requiert aucune configuration côté client. La communication directe entre le navigateur et Cosmos DB renforce les performances des scénarios web en évitant le saut supplémentaire via une application web. Dans l'exemple ci-dessous, nous sommes en mesure d'écouter directement les modifications apportées par Cosmos DB, sans devoir configurer un serveur intermédiaire à l'aide de websockets, par exemple.

import {CosmosClient} from "@azure/cosmos";

const client= new CosmosClient({
   endpoint: "https://<your-cosmos-account>documents.azure.com",
   auth: {} /* Permission token or read only key. Avoid master Key */
});

const todos = client.database("TodoApp").container("Todo").items;

todos.readAll().toArray()
     .then(({result})=>{
         for(const item of result) {
             const e = document.createElement("div")
             e.innerText = item.text;
             document.body.prepend(e);
         }
     });

Voici un exemple simple permettant à TypeScript et Webpack de fonctionner avec la bibliothèque @ azure/cosmos afin de créer une application de bulletin anonyme avec mises à jour en temps réel sur tous les clients, optimisée par Cosmos DB.

Activation de CORS

Pour activer CORS, vous pouvez utiliser le portail ou un modèle ARM. Vous pouvez utiliser un caractère générique « * » afin d'autoriser toutes les origines ou spécifier des domaines complets séparés par une virgule, (par exemple, https://www.mydomain.com, https://mydomain.com, https://api.mydomain.com). Pour le moment, il n'est pas possible d'utiliser de caractères génériques dans un nom de domaine (à savoir, https://*.mydomain.net).

Pour activer CORS dans le portail, accédez à votre compte Cosmos DB et sélectionnez l'option CORS dans la liste des paramètres. De là, vous pouvez spécifier les origines autorisées, puis sélectionner Enregistrer pour mettre à jour votre compte.

Utilisation de la bibliothèque @azure/cosmos dans un navigateur

Actuellement, @azure/cosmos possède uniquement la version CommonJS de la bibliothèque fournie avec son package. Pour utiliser la bibliothèque dans le navigateur, vous devez utiliser un outil tel que Rollup ou Webpack afin de créer une bibliothèque compatible avec ce navigateur. Certaines bibliothèques de nœuds ont besoin de simulations de navigateur spécifiques. Vous trouverez ci-dessous un exemple de fichier config webpack présentant les paramètres de simulation nécessaires.

const path = require("path");

module.exports = {
   entry: "./src/index.ts",
   devtool: "inline-source-map",
   node: {
     net: "mock",
     tls: "mock"
   },
   output: {
     filename: "bundle.js",
     path: path.resolve(__dirname, "dist")
   }
};
 
Pensez également qu'il vous est déconseillé d'utiliser votre clé principale dans la plupart des situations. Privilégiez les jetons de ressource ou clés en lecture seule. Pour comprendre comment fonctionnent les jetons de ressource et comment utiliser les fonctions Azure pour authentifier et autoriser vos utilisateurs avant de leur donner un jeton de ressource, reportez-vous à cet exemple sur Github. De nouveaux articles seront bientôt disponibles sur l'utilisation de ces modèles d'authentification avancée avec vos applications basées sur le navigateur.

Prise en main

Pour commencer, consultez notre bibliothèque @azure/cosmos sur npm et utilisez-la dans vos applications basées sur le navigateur. Nous apprécierions beaucoup que vous nous fassiez part de vos commentaires ! Adressez un e-mail à askcosmosdb@microsoft.com ou consignez les problèmes rencontrés dans notre référentiel GitHub.

Tenez-vous informé des dernières actualités et fonctionnalités Azure #CosmosDB en nous suivant sur Twitter @AzureCosmosDB. Nous sommes vraiment impatients de voir ce que vous allez créer avec Azure Cosmos DB.