Problemas de CORS con Auth0 y React

Actualmente estoy intentando implementar Auth0 en mi aplicación NodeJS + React. Este tutorial dado es realmente bueno y útil, aunque tengo un gran problema. Cada vez que bash iniciar sesión / registrarme a través de Auth0 obtengo

XMLHttpRequest no puede cargar https://XYZ.eu.auth0.com/usernamepassword/login . La respuesta a la solicitud de verificación previa no pasa la verificación de control de acceso: no hay encabezado ‘Access-Control-Allow-Origin’ presente en el recurso solicitado. Por lo tanto, el origen ‘ http: // localhost: 3000 ‘ no tiene permitido el acceso. La respuesta a la solicitud de verificación previa no pasa la verificación de control de acceso: no hay encabezado ‘Access-Control-Allow-Origin’ presente en el recurso solicitado. Por lo tanto, el origen ‘ http: // localhost: 3000 ‘ no tiene permitido el acceso.

Así que tengo una comprensión aproximada de lo que eso significa. Pero simplemente no sé dónde configurar las opciones necesarias para permitir esta solicitud a Auth0. En el lado del servidor? ¿En el código del navegador?

Atentamente


EDITAR: como señaló Rodrigo López Dato, puedo escribir Orígenes en mi aplicación aquí: https://manage.auth0.com/#/applications

¿Qué debo poner allí cuando estoy desarrollando localmente? ¿Mi IP?

Si está desarrollando localmente, puede poner la URL a la que va a redireccionar. Por ejemplo, si está ejecutando en su localhost en el puerto 4000 y desea redirigir a su ruta llamada /callback , puede poner:

 http://localhost:4000/callback 

en ese campo

Auth0 necesita saber cuáles son sus orígenes permitidos y las URL de callback para su aplicación. Puede configurarlo en la configuración de la aplicación en el panel: https://manage.auth0.com/#/applications

Solo para elaborar más en el lado del servidor, ya que mencionó que está creando una aplicación node.js. Supongo que también estás utilizando Express. Para hacer frente a las solicitudes CORS puede hacer lo siguiente:

En el archivo de su servidor Express, puede configurar el host local en algo diferente a la aplicación React del lado del cliente que probablemente se ejecuta en localhost: 3000.

 var port = normalizePort(process.env.PORT || '5000'); app.set('port', port); 

Luego instale el paquete corsnpm e inicialícelo en su archivo principal expreso.

 var app = express(); app.use(cors()); 

Luego, todo lo que tiene que hacer es establecer un proxy en el archivo React package.json del lado del cliente.

  }, "proxy": "http://localhost:5000" } 

Luego puede ejecutar su servidor node.js / express y la aplicación React al mismo tiempo y usar su servidor Express para realizar solicitudes a través del cliente React con el proxy.

Esperemos que esto ayude.

    Intereting Posts