Dela via

Konfigurera CORS-proxyserver för att hantera CORS-huvuden för inbyggd autentisering med JavaScript SDK

Gäller för: Grön cirkel med en vit bockmarkeringssymbol som anger att följande innehåll gäller för externa klienter. Externa klienter (läs mer)

I den här guiden får du lära dig hur du konfigurerar en lokal CORS-proxyserver för att hantera CORS-headers när du interagerar med det inbyggda autentiserings-API:et från din ensidiga applikation (SPA). CORS-proxyservern är en lösning på det interna autentiserings-API:ets oförmåga att stödja CORS (Cross-Origin Resource Sharing).

Du kan använda CORS-servern som du har konfigurerat i den här artikeln för utveckling av lokala appar. Alternativt:

Skapa CORS-proxyservern

  1. I rotmappen för spa-avdelningen skapar du en fil med namnet cors.jsoch lägger sedan till följande kod:

    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. I rotmappen för spa-avdelningen skapar du en fil med namnet proxy.config.jsoch lägger sedan till följande kod:

    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;

    • Hitta platshållaren Enter_the_Tenant_Subdomain_Here och ersätt den med underdomänen för Katalog (hyrestagare). Om din primära klientdomän till exempel är contoso.onmicrosoft.comanvänder du contoso. Om du inte har klientunderdomänen kan du lära dig hur du kan läsa klientinformationen.

    • tenantId och ersätt det med katalog-ID:t (hyresgäst-ID). Om du inte har ditt klientorganisations-ID kan du lära dig hur du läser dina klientorganisationsuppgifter.

  3. Öppna package.json-filen för ditt SPA och lägg sedan till följande kommando i skriptobjektet :

    "cors": "node cors.js",

Nu är CORS-proxyservern redo att köras.

Kör CORS-servern

Starta CORS-proxyservern genom att köra följande kommando i terminalen:

npm run cors

Relaterat innehåll

  • Last updated on