Delen via

Zelfstudie: CORS-proxyserver instellen om CORS-headers te beheren voor native authenticatie (preview)

Van toepassing op: Witte cirkel met een grijs X-icoon. Werknemersgebruikers Groene cirkel met een wit vinkje. Externe gebruikers (meer informatie)

In deze zelfstudie leert u hoe u de CORS-proxyserver instelt om CORS-headers te beheren terwijl u communiceert met de systeemeigen verificatie-API van een React-app met één pagina (SPA). De CORS-proxyserver is een oplossing voor het onvermogen van de systeemeigen verificatie-API om CORS-(Cross-Origin Resource Sharing) te ondersteunen.

In deze handleiding leert u:

  • Cors-proxyserver maken.
  • Stel de CORS-proxyserver in om de systeemeigen verificatie-API aan te roepen.
  • Voer uw React-app uit en test deze.

Voorwaarden

De CORS-proxyserver maken

  1. Maak in de hoofdmap van uw React-app een bestand met de naam cors.jsen voeg vervolgens de volgende code toe:

    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. Maak in de hoofdmap van uw React-app een bestand met de naam proxy.config.jsen voeg vervolgens de volgende code toe:

        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;

    • Zoek de tijdelijke aanduiding Enter_the_Tenant_Subdomain_Here en vervang deze door het subdomein Directory (tenant). Als uw primaire tenantdomein bijvoorbeeld is contoso.onmicrosoft.com, gebruikt u contoso. Als u uw tenant-subdomein niet hebt, leert u hoe u uw tenant-gegevens kunt lezen.

    • tenantId en vervang deze door de directory-id (tenant). Als u uw tenant-id niet hebt, leert u hoe u uw tenantgegevens kunt lezen.

  3. Open package.json bestand en voeg vervolgens de volgende opdracht toe in het scripts-object:

    "cors": "node cors.js",

Op dit moment zijn de React-app en de CORS-proxyserver gereed om te worden uitgevoerd.

Uw app uitvoeren en testen

  1. Open een terminalvenster en navigeer naar de hoofdmap van uw app:

    cd reactspa

  2. Voer de volgende opdracht uit in de terminal om de CORS-proxyserver te starten:

    npm run cors

  3. Als u de React-app wilt starten, opent u een ander terminalvenster en voert u vervolgens de volgende opdracht uit:

    cd reactspa
npm start

  4. Open een webbrowser en navigeer naar http://localhost:3000/. Er wordt een registratieformulier weergegeven.

  5. Als u zich wilt registreren voor een account, voert u uw gegevens in, selecteert u de knop Registreren en volgt u de aanwijzingen.

Op dit moment hebt u een React-app gemaakt waarmee u een gebruiker kunt registreren met behulp van de systeemeigen verificatie-API. Vervolgens kunt u de React-app bijwerken om u aan te melden bij een gebruiker of het wachtwoord van de gebruiker opnieuw in te stellen.

Aanvullende informatie over CORS-proxyserver

In deze zelfstudie stelt u een lokale CORS-server in. U kunt echter een omgekeerde proxyserver instellen voor het beheren van CORS-headers met behulp van azure-functie-app, zoals uitgelegd in een testomgeving.

In een productieomgeving kunt u de stappen in gebruiken om een omgekeerde proxy in te stellen voor een single-page app die gebruikmaakt van de systeemeigen verificatie-API, met behulp van Azure Function App, om uw CORS-proxyserver in te stellen.

Verwante inhoud

  • Last updated on