express - platzi - programador backend

Diferentes puertos para frontend y backend. ¿Cómo hacer una solicitud?

Question

Usando Angular-CLI como frontend. 4200 puerto

Usando Express como back-end. Puerto 8080

Los directorios se ven así:

Application
 - backend
   - ...Express architecture
 - frontend
   -...Angular2 architecture

Así que estoy ejecutando dos proyectos, dos comandantes, uno para el frontend, el segundo para el back-end. node app.js para backend (8080), ng serve para frontent (4200).

Supongamos que tengo una capa en el back-end que devuelve algo de cadena.

app.get(''/hello'', function(req, res) {
  res.send("Hello!");
}

¿Cómo puedo hacer una solicitud de frontend a back-end y obtener esa cadena? No quiero saber exactamente cómo debería usar Angular2 porque ese no es el punto. Me pregunto qué tecnología debo usar para poder conectar estos dos lados (frontales y de fondo) en diferentes puertos. Si solo los ejecuto y hago una solicitud desde el frontend, obtendré un error porque no puede encontrar /hello url.

Answer 1

Su solicitud a /hello significa una ruta absoluta dentro de la aplicación que ejecuta la aplicación angular, por lo que la solicitud va a http://localhost:4200/hello . Su aplicación angular simplemente no sabe acerca de la aplicación expresa que desea orientar.

URL absolutas

Si desea acceder a la ruta de hello en la otra aplicación (express), debe especificar esto explícitamente haciendo referencia a http://localhost:8080/hello .

cors

Al hacerlo de esta manera, la aplicación correcta está dirigida, pero es probable que se encuentre con problemas de CORS, ya que el navegador evitará que el código de JavaScript obtenido de localhost:4200 acceda a un servidor en localhost:8080 . Esta es una característica de seguridad de su navegador. Entonces, si desea permitir que el código en 4200 acceda al backend en 8080, su backend puede incluir en la lista blanca este llamado origen. Para más detalles, consulte http://enable-cors.org/ y un middleware expreso correspondiente que podría usar para respaldar los cors en su back-end ( https://www.npmjs.com/package/cors ).

Usar este enfoque tiene dos desventajas en mi opinión. En primer lugar, necesita una forma de decirle a su interfaz en qué URL absoluta puede llegar al back-end. Esto debe ser configurable porque necesita diferentes URL para desarrollo, montaje y producción. También necesita una forma de administrar todas las URL incluidas en la lista blanca, ya que la interfaz en producción tendrá una URL diferente a la de la interfaz en desarrollo. Esto puede ser bastante complicado de manejar.

proxying su back-end

Un mejor enfoque en mi opinión es manejar esto en su infraestructura mediante el proxying del back-end en su aplicación de frontend. Con el proxy, básicamente le dice a su servidor frontend que todas las solicitudes a alguna url deben pasarse a otra aplicación. En su caso, esto podría significar que, por ejemplo, usted configura un proxy para la ruta /api/ para proxy de la aplicación en localhost:8080 . El servidor no intenta encontrar una URL como /api/hello en su aplicación frontend pero reenvía su solicitud a localhost:8080/hello . En su aplicación angular, no necesita preocuparse por la URL de su servidor y, a continuación, siempre puede hacer una solicitud a una url como /api/some-express-route .

Para que esto funcione, debe configurar su servidor de desarrollo angular para proxy de las solicitudes. Para obtener detalles sobre cómo hacer esto, consulte los documentos en https://github.com/angular/angular-cli#proxy-to-backend . Cuando vaya a la producción, puede hacer esto configurando su servidor web, por ejemplo, nginx para proxy de las solicitudes.