Partager via

Tutoriel : Configurer le serveur proxy CORS pour gérer les en-têtes CORS pour l’authentification native (préversion)

S’applique à : cercle vert avec un symbole de coche blanc qui indique que le contenu suivant s’applique aux locataires externes. Locataires externes (en savoir plus)

Dans ce tutoriel, vous allez apprendre à configurer le serveur proxy CORS pour gérer les en-têtes CORS tout en interagissant avec l’API d’authentification native à partir d’une application monopage React (SPA). Le serveur proxy CORS est une solution à l’incapacité de l’API d’authentification native à prendre en charge le partage de ressources inter-origine (CORS).

Dans ce tutoriel, vous allez :

  • Créez un serveur proxy CORS.
  • Configurez le serveur proxy CORS pour appeler l’API d’authentification native.
  • Exécutez et testez votre application React.

Conditions préalables

Créer le serveur proxy CORS

  1. Dans le dossier racine de votre application React, créez un fichier appelé cors.js, puis ajoutez le code suivant :

    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. Dans le dossier racine de votre application React, créez un fichier appelé proxy.config.js, puis ajoutez le code suivant :

        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;

    • Recherchez l’espace réservé Enter_the_Tenant_Subdomain_Here et remplacez-le par le sous-domaine Répertoire (locataire). Par exemple, si le domaine principal de votre locataire est contoso.onmicrosoft.com, utilisez contoso. Si vous ne connaissez pas le sous-domaine de votre locataire, découvrez comment lire les détails de votre locataire.

    • tenantId et remplacez-le par l’ID de locataire du répertoire. Si vous n’avez pas votre identifiant de locataire, apprenez comment consulter les détails de votre locataire.

  3. Ouvrez le fichier package.json, puis ajoutez la commande suivante dans l'objet de scripts :

    "cors": "node cors.js",

À ce stade, l’application React et le serveur proxy CORS sont prêts à s’exécuter.

Exécuter et tester votre application

  1. Ouvrez une fenêtre de terminal et accédez au dossier racine de votre application :

    cd reactspa

  2. Pour démarrer le serveur proxy CORS, exécutez la commande suivante dans votre terminal :

    npm run cors

  3. Pour démarrer l’application React, ouvrez une autre fenêtre de terminal, puis exécutez la commande suivante :

    cd reactspa
npm start

  4. Ouvrez un navigateur web et accédez à http://localhost:3000/. Un formulaire d’inscription s’affiche.

  5. Pour vous inscrire à un compte, entrez vos informations personnelles, sélectionnez le bouton s’inscrire, puis suivez les instructions.

À ce stade, vous avez créé une application React qui peut inscrire un utilisateur à l’aide de l’API d’authentification native. Ensuite, vous pouvez mettre à jour l’application React pour vous connecter à un utilisateur ou réinitialiser le mot de passe de l’utilisateur.

Informations supplémentaires sur le serveur proxy CORS

Dans ce tutoriel, vous configurez un serveur CORS local. Toutefois, vous pouvez configurer un serveur proxy inverse pour gérer les en-têtes CORS à l’aide d’Azure Function App, comme expliqué dans un environnement de test.

Dans un environnement de production, vous pouvez utiliser les étapes décrites dans Configurer un proxy inverse pour une application monopage qui utilise l’API d’authentification native à l’aide de l’application de fonction Azure pour configurer votre serveur proxy CORS.

Contenu connexe

  • Last updated on