Condividi tramite

Tutorial: Configurare il server proxy CORS per gestire le intestazioni CORS per l'autenticazione nativa (visualizzazione in anteprima)

Si applica a: Cerchio bianco con un simbolo X grigio. Utenti aziendali Cerchio verde con simbolo di spunta bianco. Utenti esterni (altre informazioni)

Questa esercitazione illustra come configurare il server proxy CORS per gestire le intestazioni CORS durante l'interazione con l'API di autenticazione nativa da un'app a pagina singola React. Il server proxy CORS è una soluzione per l'impossibilità dell'API di autenticazione nativa di supportare condivisione di risorse tra le origini (CORS).

In questa esercitazione, farai:

  • Creare un server proxy CORS.
  • Configurare il server proxy CORS per chiamare l'API di autenticazione nativa.
  • Eseguire e testare l'app React.

Prerequisiti

Creare il server proxy CORS

  1. Nella cartella radice dell'app React creare un file denominato cors.js, quindi aggiungere il codice seguente:

    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. Nella cartella radice dell'app React creare un file denominato proxy.config.js, quindi aggiungere il codice seguente:

        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;

    • Trovare il segnaposto Enter_the_Tenant_Subdomain_Here e sostituirlo con il sottodominio Directory (tenant). Ad esempio, se il dominio primario del tenant è contoso.onmicrosoft.com, usare contoso. Se non hai il tuo sottodominio del tenant, impara come leggere i dettagli del tenant.

    • tenantId e sostituirlo con l'ID Directory (tenant). Se non hai il tuo ID tenant, scopri come leggere i dettagli del tenant.

  3. Apri il file package.json, quindi aggiungi il comando seguente nell'oggetto script :

    "cors": "node cors.js",

A questo punto, l'app React e il server proxy CORS sono pronti per l'esecuzione.

Eseguire e testare l'app

  1. Aprire una finestra del terminale e passare alla cartella radice dell'app:

    cd reactspa

  2. Per avviare il server proxy CORS, eseguire il comando seguente nel terminale:

    npm run cors

  3. Per avviare l'app React, aprire un'altra finestra del terminale, quindi eseguire il comando seguente:

    cd reactspa
npm start

  4. Aprire un Web browser e passare a http://localhost:3000/. Viene visualizzato un modulo di iscrizione.

  5. Per iscriversi a un account, inserire i dettagli, selezionare il pulsante iscrizione, quindi seguire le indicazioni.

A questo punto, hai creato con successo un'app React che consente a un utente di registrarsi utilizzando l'API di autenticazione nativa. È quindi possibile aggiornare l'app React per accedere a un utente o reimpostare la password dell'utente.

Altre informazioni sul server proxy CORS

In questa esercitazione si configura un server CORS locale. Tuttavia, è possibile configurare un server proxy inverso per gestire le intestazioni CORS usando l'app per le funzioni di Azure, come illustrato in un ambiente di test.

In un ambiente di produzione è possibile usare i passaggi descritti in Configurare un proxy inverso per un'app a pagina singola che usa l'API di autenticazione nativa usando l'app per le funzioni di Azure per configurare il server proxy CORS.

Contenuto correlato