Azure Cosmos DB unterstützt jetzt den CORS-Header (Cross-Origin Resource Sharing, Ressourcenfreigabe zwischen verschiedenen Ursprüngen) „allowedOrigins“ für unsere SQL-Core-API. Sie können diese Einstellung über das Portal oder ARM-Vorlagen konfigurieren. Durch die CORS-Unterstützung können Ihre Web-Apps direkt aus dem Browser mit Cosmos DB kommunizieren, indem Sie die JavaScript-Bibliothek @azure/cosmos verwenden. Gleichzeitig erhalten Sie eine schnellere und ansprechendere Benutzeroberfläche und vermeiden eine Zwischenebene.

Was ist Azure Cosmos DB?

Azure Cosmos DB ist ein global verteilter Datenbankdienst mit mehreren Modellen, der es ermöglicht, Daten in beliebigen Azure-Regionen zu lesen und zu schreiben. Er bietet eine schlüsselfertige globale Verteilung, eine elastische Skalierung von Durchsatz und Speicher und garantiert Latenzen im einstelligen Millisekundenbereich im 99. Perzentil.

Wir bieten für die SQL-Core-API für Azure Cosmos DB eine JavaScript-Bibliothek, die sowohl mit Node.js als auch in Browserumgebungen verwendet werden kann. Diese Bibliothek kann nun die Vorteile der CORS-Unterstützung nutzen. Um dieses Feature zu verwenden, ist auf Clientseite keine Konfiguration erforderlich. Da nun auch Browser direkt mit Cosmos DB kommunizieren können, erhalten Sie noch mehr Leistung bei Webszenarien, da keine zusätzliche Verarbeitung durch eine Web-App erforderlich ist. Im unten verlinkten Beispiel können wir direkt auf Änderungen von Cosmos DB lauschen und müssen keinen Zwischenserver mit z.B. WebSockets einrichten.

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

const client= new CosmosClient({
   endpoint: "https://<Ihr-Cosmos-Konto>documents.azure.com",
   auth: {} /* Berechtigungstoken oder schreibgeschützter Schlüssel. Nicht den Hauptschlüssel verwenden. */
});

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);
         }
     });

In diesem einfachen Beispiel nutzen TypeScript und Webpack die @azure/cosmos-Bibliothek, um eine anonyme Mitteilungs-App zu erstellen, die für alle Clients Updates in Echtzeit bereitstellt und ausschließlich mit Cosmos DB arbeitet.

Aktivieren von CORS

Zum Aktivieren von CORS können Sie das Portal oder eine ARM-Vorlage verwenden. Mit dem Platzhalter „*“ erlauben Sie alle Quellen. Sie können aber auch vollqualifizierte Domänen angeben, die Sie dann durch ein Komma voneinander trennen (z.B. „https://www.mydomain.com, https://mydomain.com, https://api.mydomain.com“). Derzeit können Sie Platzhalter noch nicht in Domänennamen verwenden (wie z.B. in https://*.mydomain.net).

Wenn Sie CORS im Portal aktivieren möchten, navigieren Sie zu Ihrem Cosmos DB-Konto und wählen die Option CORS in der Liste der Einstellungen aus. Geben Sie dort auch die zulässigen Quellen an, und wählen Sie dann Speichern aus, um Ihr Konto zu aktualisieren.

Verwenden der @azure/cosmos-Bibliothek in einem Browser

Zurzeit enthält @azure/cosmos nur die CommonJS-Version der Bibliothek direkt im Paket. Wenn Sie die Bibliothek im Browser verwenden möchten, müssen Sie ein Tool wie Rollup oder Webpack verwenden, um eine mit dem Browser kompatible Bibliothek zu erstellen. Für bestimmte Node-Bibliotheken müssen Browsermodelle bereitgestellt werden. Im Folgenden finden Sie ein Beispiel für eine Webpack-Konfigurationsdatei mit den erforderlichen Modelleinstellungen.

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")
   }
};
 
Sie sollten bei der Verwendung eines Browsers in den meisten Fällen auch vermeiden, den Masterschlüssel zu verwenden. Verwenden Sie stattdessen lieber Ressourcentoken oder schreibgeschützte Schlüssel. In diesem Beispiel auf GitHub finden Sie Einführungsinformationen zur Funktionsweise von Ressourcentoken und dazu, wie Sie z.B. Azure Functions zum Authentifizieren und Autorisieren von Benutzern verwenden, bevor Sie diesen ein Ressourcentoken zuweisen. Wir werden in Kürze noch weitere Blogbeiträge zur Verwendung dieser erweiterten Authentifizierungsmuster für browserbasierte Anwendungen veröffentlichen.

Erste Schritte

Sehen Sie sich als Einstieg unsere @azure/cosmos-Bibliothek in npm an, bevor Sie sie dann in Ihren browserbasierten Apps zu verwenden. Wir würden uns sehr über Ihr Feedback freuen! Schreiben Sie einfach eine E-Mail an askcosmosdb@microsoft.com, oder melden Sie Probleme im GitHub-Repository.

Folgen Sie uns auf Twitter @AzureCosmosDB, um stets über die neuesten Updates und Features von Azure #CosmosDB auf dem Laufenden zu bleiben. Wir sind gespannt, welche Innovationen Sie mit Azure Cosmos DB entwickeln werden.