Freigeben über

Lernprogramm: Einrichten des CORS-Proxyservers zum Verwalten von CORS-Headern für systemeigene Authentifizierung (Vorschau)

Gilt für: Grüner Kreis mit einem weißen Häkchensymbol, das angibt, dass der folgende Inhalt für externe Mandanten gilt. Externe Mandanten (weitere Informationen)

In diesem Lernprogramm erfahren Sie, wie Sie den CORS-Proxyserver zum Verwalten von CORS-Headern einrichten und gleichzeitig mit der nativen Authentifizierungs-API aus einer Einzelseiten-App (REACT Single Page App, SPA) interagieren. Der CORS-Proxyserver ist eine Lösung für die Unfähigkeit der nativen Authentifizierungs-API, Cross-Origin Resource Sharing (CORS) zu unterstützen.

In diesem Tutorial führen Sie Folgendes durch:

  • Erstellen Sie CORS-Proxyserver.
  • Richten Sie den CORS-Proxyserver ein, um die systemeigene Authentifizierungs-API aufzurufen.
  • Führen Sie Ihre React-App aus, und testen Sie sie.

Voraussetzungen

Erstellen des CORS-Proxyservers

  1. Erstellen Sie im Stammordner Ihrer React-App eine Datei namens cors.js, und fügen Sie dann den folgenden Code hinzu:

    const http = require("http");
const https = require("https");
const url = require("url");
const proxyConfig = require("./proxy.config.js");

http
.createServer((req, res) => {
    const reqUrl = url.parse(req.url);
    const domain = url.parse(proxyConfig.proxy).hostname;
    if (reqUrl.pathname.startsWith(proxyConfig.localApiPath)) {

        const targetUrl = proxyConfig.proxy + reqUrl.pathname?.replace(proxyConfig.localApiPath, "") + (reqUrl.search || "");

        console.log("Incoming request -> " + req.url + " ===> " + reqUrl.pathname);

        const proxyReq = https.request(
            targetUrl,
            {
                method: req.method,
                headers: {
                    ...req.headers,
                    host: domain,
                },
            },
            (proxyRes) => {
                res.writeHead(proxyRes.statusCode, {
                    ...proxyRes.headers,
                    "Access-Control-Allow-Origin": "*",
                    "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
                    "Access-Control-Allow-Headers": "Content-Type, Authorization",
                });

                proxyRes.pipe(res);
            }
        );

        proxyReq.on("error", (err) => {
            console.error("Error with the proxy request:", err);
            res.writeHead(500, { "Content-Type": "text/plain" });
            res.end("Proxy error.");
        });

        req.pipe(proxyReq);
    } else {
        res.writeHead(404, { "Content-Type": "text/plain" });
        res.end("Not Found");
    }
})
.listen(proxyConfig.port, () => {
    console.log("CORS proxy running on http://localhost:3001");
    console.log("Proxying from " + proxyConfig.localApiPath + " ===> " + proxyConfig.proxy);
});

  2. Erstellen Sie im Stammordner Ihrer React-App eine Datei namens proxy.config.js, und fügen Sie dann den folgenden Code hinzu:

        const tenantSubdomain = "Enter_the_Tenant_Subdomain_Here";
    const tenantId = "Enter_the_Tenant_Id_Here";

    const config = {
        localApiPath: "/api",
        port: 3001,
        proxy: `https://${tenantSubdomain}.ciamlogin.com/${tenantId}`,
    };
    module.exports = config;

    • Suchen Sie den Platzhalter Enter_the_Tenant_Subdomain_Here, und ersetzen Sie diesen durch die Verzeichnisunterdomäne (Mandant). Wenn Ihre primäre Mandantendomäne z. B. contoso.onmicrosoft.comist, verwenden Sie contoso. Wenn Sie Ihre Mandantenunterdomäne nicht haben, erfahren Sie, wie Sie die Details Ihres Mandanten auslesen.

    • tenantId, und ersetzen Sie den Wert durch die Verzeichnis-ID (Mandant). Wenn Sie Ihre Mandanten-ID nicht kennen, finden Sie weitere Informationen unter Abrufen der Details des externen Mandanten.

  3. Öffnen Sie package.json Datei, und fügen Sie dann den folgenden Befehl in den Skripts Objekt hinzu:

    "cors": "node cors.js",

Zu diesem Zeitpunkt können die React-App und der CORS-Proxyserver ausgeführt werden.

Ausführen und Testen der App

  1. Öffnen Sie ein Terminalfenster, und navigieren Sie zum Stammordner Ihrer App:

    cd reactspa

  2. Führen Sie zum Starten des CORS-Proxyservers den folgenden Befehl in Ihrem Terminal aus:

    npm run cors

  3. Um die React-App zu starten, öffnen Sie ein weiteres Terminalfenster, und führen Sie dann den folgenden Befehl aus:

    cd reactspa
npm start

  4. Öffnen Sie einen Webbrowser, und navigieren Sie zu http://localhost:3000/. Ein Registrierungsformular wird angezeigt.

  5. Um sich für ein Konto anzumelden, geben Sie Ihre Details ein, wählen Sie die Schaltfläche Registrieren aus, und folgen Sie dann den Anweisungen.

Zu diesem Zeitpunkt haben Sie erfolgreich eine React-App erstellt, die einen Benutzer mithilfe der systemeigenen Authentifizierungs-API registrieren kann. Als Nächstes können Sie die React-App aktualisieren, um sich bei einem Benutzer anzumelden oder das Kennwort des Benutzers zurückzusetzen.

Weitere Informationen zum CORS-Proxyserver

In diesem Lernprogramm richten Sie einen lokalen CORS-Server ein. Sie können jedoch einen Reverseproxyserver zum Verwalten von CORS-Headern einrichten, indem Sie Azure Function App verwenden, wie es in einer Testumgebungerläutert wird.

In einer Produktionsumgebung können Sie die Schritte in Einrichten eines Reverseproxys für eine einzelseitige App verwenden, die systemeigene Authentifizierungs-API verwendet, indem Sie Azure Function App verwenden, um Ihren CORS-Proxyserver einzurichten.

Verwandte Inhalte

  • Last updated on