Compartir a través de

Tutorial: Configuración del servidor proxy de CORS para administrar encabezados CORS para la autenticación nativa (versión preliminar)

Se aplica a: Círculo blanco con un símbolo X gris. Inquilinos del personal Círculo verde con un símbolo de marca de verificación blanca. Inquilinos externos (más información)

En este tutorial, aprenderá a configurar el servidor proxy CORS para administrar encabezados CORS al interactuar con la API de autenticación nativa desde una aplicación de página única (SPA) de React. El servidor proxy CORS es una solución a la incapacidad de la API de autenticación nativa para admitir uso compartido de recursos entre orígenes (CORS).

En este tutorial, usted hará lo siguiente:

  • Cree un servidor proxy CORS.
  • Configure el servidor proxy CORS para llamar a la API de autenticación nativa.
  • Ejecute y pruebe la aplicación React.

Prerrequisitos

Creación del servidor proxy CORS

  1. En la carpeta raíz de la aplicación react, cree un archivo denominado cors.jsy agregue el código siguiente:

    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. En la carpeta raíz de la aplicación react, cree un archivo denominado proxy.config.jsy agregue el código siguiente:

        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;

    • Busque el marcador de posición Enter_the_Tenant_Subdomain_Here y reemplácelo por el subdominio Directorio (inquilino). Por ejemplo, si el dominio principal del cliente es contoso.onmicrosoft.com, utilice contoso. Si no tiene su subdominio de inquilino, obtenga información sobre cómo leer los detalles de su inquilino.

    • tenantId y reemplácelo por el identificador de directorio (arrendatario). Si no tiene el identificador de inquilino, aprenda a leer los detalles del inquilino.

  3. Abra package.json archivo y agregue el siguiente comando en el objeto scripts :

    "cors": "node cors.js",

En este momento, la aplicación React y el servidor proxy CORS están listos para ejecutarse.

Ejecución y prueba de la aplicación

  1. Abra una ventana de terminal y vaya a la carpeta raíz de la aplicación:

    cd reactspa

  2. Para iniciar el servidor proxy CORS, ejecute el siguiente comando en el terminal:

    npm run cors

  3. Para iniciar la aplicación React, abra otra ventana de terminal y ejecute el siguiente comando:

    cd reactspa
npm start

  4. Abra un explorador web y vaya a http://localhost:3000/. Aparece un formulario de registro.

  5. Para registrarse en una cuenta, escriba los detalles, seleccione el botón Registrarse y siga las indicaciones.

En este momento, ha creado correctamente una aplicación de React que puede registrar a un usuario mediante la API de autenticación nativa. A continuación, puede actualizar la aplicación React para iniciar sesión en un usuario o restablecer la contraseña del usuario.

Información adicional sobre el servidor proxy CORS

En este tutorial, configurará un servidor CORS local. Sin embargo, puede configurar un servidor proxy inverso para administrar encabezados CORS mediante Azure Function App, como se explica en un entorno de prueba.

En un entorno de producción, puede usar los pasos descritos en Configuración de un proxy inverso para una aplicación de página única que usa la API de autenticación nativa mediante Azure Function App para configurar el servidor proxy CORS.

Contenido relacionado