Sdílet prostřednictvím

Kurz: Nastavení proxy serveru CORS pro správu hlaviček CORS pro nativní ověřování (Preview)

Platí pro: Zelený kruh s bílým symbolem zaškrtnutí, který označuje, že následující obsah platí pro externí nájemce. Externí nájemci (další informace)

V tomto kurzu se dozvíte, jak nastavit proxy server CORS pro správu hlaviček CORS při interakci s nativním ověřovacím rozhraním API z jednostránkové aplikace React (SPA). Proxy server CORS je řešením neschopnosti nativního ověřovacího rozhraní API podporovat sdílení prostředků mezi zdroji (CORS).

V tomto kurzu se naučíte:

  • Vytvořte proxy server CORS.
  • Nastavte proxy server CORS tak, aby volal nativní ověřovací rozhraní API.
  • Spusťte a otestujte aplikaci React.

Požadavky

Vytvoření proxy serveru CORS

  1. V kořenové složce aplikace React vytvořte soubor s názvem cors.jsa přidejte následující kód:

    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. V kořenové složce aplikace React vytvořte soubor s názvem proxy.config.jsa přidejte následující kód:

        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;

    • Vyhledejte zástupný symbol Enter_the_Tenant_Subdomain_Here a nahraďte ho subdoménou adresáře (klienta). Pokud je například primární doména vašeho tenanta contoso.onmicrosoft.com, použijte contoso. Pokud nemáte subdoménu tenanta, zjistěte, jak si přečíst podrobnosti o tenantovi.

    • tenantId a nahraďte ho ID adresáře (tenanta). Pokud nemáte své klientské ID, naučte se, jak zjistit podrobnosti o klientovi.

  3. Otevřete soubor package.json a pak do skriptů objektu přidejte následující příkaz:

    "cors": "node cors.js",

V tuto chvíli je aplikace React a proxy server CORS připravené ke spuštění.

Spuštění a otestování aplikace

  1. Otevřete okno terminálu a přejděte do kořenové složky aplikace:

    cd reactspa

  2. Pokud chcete spustit proxy server CORS, spusťte v terminálu následující příkaz:

    npm run cors

  3. Pokud chcete spustit aplikaci React, otevřete další okno terminálu a spusťte následující příkaz:

    cd reactspa
npm start

  4. Otevřete webový prohlížeč a přejděte na http://localhost:3000/. Zobrazí se registrační formulář.

  5. Pokud se chcete zaregistrovat k účtu, zadejte podrobnosti, vyberte tlačítko Zaregistrovat se a postupujte podle pokynů.

V tuto chvíli jste úspěšně vytvořili aplikaci React, která může zaregistrovat uživatele pomocí nativního ověřovacího rozhraní API. Dále můžete aplikaci React aktualizovat tak, aby se přihlásila uživatele nebo resetovala heslo uživatele.

Další informace o proxy serveru CORS

V tomto kurzu nastavíte místní server CORS. Můžete ale nastavit reverzní proxy server pro správu hlaviček CORS pomocí aplikace funkcí Azure, jak je vysvětleno v testovacím prostředí.

V produkčním prostředí můžete použít kroky v Nastavení reverzního proxy serveru pro jednostráňovou aplikaci, která používá nativní rozhraní API pro ověřování pomocí aplikace Azure Function App k nastavení proxy serveru CORS.

Související obsah

  • Last updated on