Angular 7 app llegar CORS error angular cliente

He desarrollado un angular 7 app con express backend. Expresa que se ejecutan en localhost:3000 y angular, el cliente se está ejecutando en localhost:4200.

En el server.js que tengo (no todo el código)

const app = express();
//Enable CORS
app.use(cors());
//Get our API routes
const api = require('./api');
//Set our api routes
app.use('/api', api);
app.use(express.static(__dirname + '/dist/sfdc-event'));

En el api.js archivo, tengo router.get(‘/oauth2/login’) que redirige a https://example.com que envía un token de acceso y autentica al usuario (OAuth2 de autenticación).

Cuando estoy llamando a la url http://localhost:3000/api/oauth2/login todo funciona bien, pero cuando estoy tratando de hacer lo mismo de la componente angular.ts -> servicio.ts recibo el siguiente error.

Cruz-Solicitud de Origen Bloqueado: El Origen Mismo de la Política no permite la lectura
el recurso remoto Razón: CORS encabezado ‘Access-Control-Allow-Origin’
falta

Angular de la aplicación de flujo de la siguiente inicio de sesión.componente.ts que tiene un botón de llamada a una api de servicio.servicio.ts que ejecuta un http get.

login.component.ts

sfdcLogin(): void {
  console.log('DEBUG: LoginComponent: ', 'Login button clicked..');
 this.apiService.login().subscribe( data => { console.log( data ); });
}

de la api.servicio.ts

login() {
  console.log('DEBUG: APiService login(): ', 'login() function.');
  const URL = 'oauth2/login';
  console.log('DEBUG: ApiService login URL : ', `${environment.baseUrl}/${URL}`.toString());
  return this.http.get(`${environment.baseUrl}/${URL}`)
    .pipe( map( res => res ));
}

Alguien me puede ayudar a conseguir pasar el error? Tengo una) CORS b) servir archivos estáticos de server.js como

app.use(express.static(__dirname + '/dist/sfdc-event'));

c) dinámica de la variable de entorno.
¿Qué más me falta?

  • ¿Qué es el código de estado HTTP de la respuesta?
  • Sarkar, si procede amablemente marcar la respuesta correcta
InformationsquelleAutor Arup Sarkar | 2018-11-26

7 Kommentare

  1. 6

    Angular 7 debe hacer otra aplicación. Desde angulares documentación debe crear un proxy.js archivo:

    https://angular.io/guide/build#using-corporate-proxy

    Modificar la ruta de acceso para su propio servidor back-end.

    proxy.js:

    var HttpsProxyAgent = require('https-proxy-agent');
    var proxyConfig = [{
      context: '/api',
      target: 'http://your-remote-server.com:3000',
      secure: false
    }];
    
    function setupForCorporateProxy(proxyConfig) {
      var proxyServer = process.env.http_proxy || process.env.HTTP_PROXY;
      if (proxyServer) {
        var agent = new HttpsProxyAgent(proxyServer);
        console.log('Using corporate proxy server: ' + proxyServer);
        proxyConfig.forEach(function(entry) {
          entry.agent = agent;
        });
      }
      return proxyConfig;
    }
    
    module.exports = setupForCorporateProxy(proxyConfig);

    Más tarde añadir a su paquete.json

    "start": "ng serve --proxy-config proxy.js"

    Y llamar a este con:

    npm start

    Y en su app.js simplemente añadir:

    const cors = require("cors");
    app.use(cors());

    Yo tenía el mismo problema y que resolvió mi problema. Espero te sirva de ayuda!

  2. 3

    He estado trabajando con Angular de la cli y .net Framework en el lado del servidor.

    Para resolver este problema, acabo de ennable CORS de la interacción en el lado del servidor utilizando los pasos siguientes:

    1. Install-Package Microsoft.AspNet.WebApi.Cors -Version 5.2.6

      Y, a continuación, en WebApiConfig clase:

    2. Agregar using System.Web.Http.Cors;

    3. Dentro de Registrar(HttpConfiguration config) método:

    var cors = new EnableCorsAttribute("http://localhost:4200", "*", "*");
    
    config.EnableCors(cors);

    o

    var cors = new EnableCorsAttribute("*", "*", "*"); //origin, headers, methods
    
    config.EnableCors(cors);
  3. 2

    Para desviar todas las llamadas para http://localhost:4200/api a un servidor que se ejecuta en http://localhost:3000/api, tomar el siguiente pasos.

    1. Crear un archivo proxy.conf.json en los proyectos src/carpeta, junto al paquete.json.

    2. Agregue el siguiente contenido para el nuevo archivo de proxy:

      {
      «/api»: {
      «destino»: «http://localhost:3000«,
      «seguro»: false
      }
      }

    3. En el CLI archivo de configuración angular.json, agregar el proxyConfig opción para el servicio de destino:


      «arquitecto»: {
      «servir»: {
      «constructor»: «@angular devkit/build-angular:dev-servidor»,
      «opciones»: {
      «browserTarget»: «su-aplicación-nombre:construcción»,
      «proxyConfig»: «src/proxy.conf.json»
      },

    4. Para ejecutar el dev server con esta configuración de proxy, llamada ng servir.

  4. 1

    Si esto es solo para el desarrollo recomiendo el uso de un proxy que viene con angular de la cli.
    Crear un archivo llamado proxy.json

    y

    {
      "/api/oauth2/login": {
        "target": "http://localhost:3000/api/oauth2/login",
        "secure": false
      }
    }

    y la llamada ng serve --proxy-config proxy.json. Si usted puede esperar que esto sea un problema en la producción, entonces tenemos que tener una gran conversación.

    Documentación completa:
    https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md

    También lo es CORS es exactamente: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

  5. 1

    He cambiado el mecanismo de devolución de llamada para conseguir más allá de la CORS problema, estoy utilizando un flujo de OAuth para que el usuario autenticado de https://example.com que estaba redirigiendo a https://example.com/auth/callback, estaba iniciando la solicitud de http://localhost:4200 y, a continuación, enviar la url de callback para el servidor http://localhost:3000 y me estaba poniendo el CORS de error.

    Ahora, estoy redirigir al cliente http://localhost:4200 y he pasado el CORS problema. Todas las demás llamadas por GET, POST, DELETE, el PARCHE es de la http://localhost:3000 que está trabajando bien.

    Gracias a todos por sus aportaciones.

  6. 0

    Ya que, a su angular de la aplicación se está ejecutando en 4200 puerto y backend ejecutando en el puerto 3000, el origen de la aplicación es diferente.

    Para resolver este problema, puede «instalación de nginx» en su máquina.

    Esto hará que todas sus solicitudes de angular y backend, ir a través de «nginx servidor». Por lo tanto, resolver el problema de CORS.

    • Finalmente, este será alojado en heroku PAAS. No estoy seguro de que puedo utilizar «nginx servidor». Para su INFORMACIÓN, he cargado la aplicación a heroku y es el mismo comportamiento.
    • Estoy seguro de que hay un CORS configuración de encabezado en la heroku. Leer este artículo es de 10 minutos de lectura y explaines todo: developer.mozilla.org/en-US/docs/Web/HTTP/CORS
  7. 0

    Sé que esto ya está respondido, pero podría ayudar a alguien que está buscando CORS problema.
    Usted puede seguir por debajo de los 3 pasos para resolver este problema.
    1. Crear proxy.conf.archivo json y ponerlo a nivel de la raíz de tu aplicación.
    2. En el paquete.archivo json, añadir el proxy parámetro en ngstart
    3. En angular.json, añadir el proxy archivo de entrada.
    4. Cambiar todo su resto de llamadas a algo como /api/getData.

    Completo tutorial paso a paso se da aquí.
    http://www.codeyourthought.com/angular/proxy-to-make-http-call-in-angular/

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea