Sdílet prostřednictvím

Nastavení proxy serveru CORS pro správu hlaviček CORS pro nativní ověřování JavaScript SDK

Platí pro: Zelený kruh se symbolem bílé značky zaškrtnutí, který označuje následující obsah platí pro externí tenanty. Externí tenanti (další informace)

V této příručce se dozvíte, jak nastavit místní 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 (SPA). Proxy server CORS je řešením neschopnosti nativního ověřovacího rozhraní API podporovat sdílení prostředků mezi zdroji (CORS).

Pro vývoj místních aplikací můžete použít server CORS, který jste nastavili v tomto článku. Alternativně:

Vytvoření proxy serveru CORS

  1. V kořenové složce spa 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");

const extraHeaders = [
    "x-client-SKU",
    "x-client-VER",
    "x-client-OS",
    "x-client-CPU",
    "x-client-current-telemetry",
    "x-client-last-telemetry",
    "client-request-id",
];
http.createServer((req, res) => {
    const reqUrl = url.parse(req.url);
    const domain = url.parse(proxyConfig.proxy).hostname;

    // Set CORS headers for all responses including OPTIONS
    const corsHeaders = {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
        "Access-Control-Allow-Headers": "Content-Type, Authorization, " + extraHeaders.join(", "),
        "Access-Control-Allow-Credentials": "true",
        "Access-Control-Max-Age": "86400", // 24 hours
    };

    // Handle preflight OPTIONS request
    if (req.method === "OPTIONS") {
        res.writeHead(204, corsHeaders);
        res.end();
        return;
    }

    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 newHeaders = {};
        for (let [key, value] of Object.entries(req.headers)) {
            if (key !== 'origin') {
                newHeaders[key] = value;
            }
        }

        const proxyReq = https.request(
            targetUrl,
            {
                method: req.method,
                headers: {
                    ...newHeaders,
                    host: domain,
                },
            },
            (proxyRes) => {
                res.writeHead(proxyRes.statusCode, {
                    ...proxyRes.headers,
                    ...corsHeaders,
                });

                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 spa 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 Directory (tenanta). Pokud je například primární doména vašeho tenanta contoso.onmicrosoft.com, použijte contoso. Pokud nemáte subdoménu tenanta, přečtěte si, jak přečíst podrobnosti o tenantovi.

    • tenantId a nahraďte ho ID adresáře (tenanta). Pokud nemáte ID tenanta, zjistěte, jak získat podrobnosti o tenantovi.

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

    "cors": "node cors.js",

V tomto okamžiku je proxy server CORS připravený ke spuštění.

Spuštění serveru CORS

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

npm run cors

Související obsah

  • Last updated on