wake-up-neo.com

Angular 7-App erhält CORS-Fehler von einem Winkel-Client

Ich habe eine eckige 7-App mit Express-Backend entwickelt. Express läuft auf localhost:3000 und Angular Client läuft auf localhost: 4200.

Im server.js habe ich (nicht den gesamten Code)

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'));

In der Datei api.js habe ich router.get ('/ oauth2/login'), das zu https://example.com umleitet, das ein Zugriffstoken sendet und den Benutzer authentifiziert (OAuth2-Authentifizierung).

Wenn ich die URL anrufe http: // localhost: 3000/api/oauth2/login funktioniert alles einwandfrei, aber wenn ich versuche, dasselbe von angle component.ts -> service.ts zu tun, bekomme ich es der folgende Fehler.

Ursprungsübergreifende Anforderung blockiert: Dieselbe Ursprungsrichtlinie verhindert das Lesen Die entfernte Ressource. Grund: CORS-Header ‘Access-Control-Allow-Origin’ fehlt

Angular App Flow folgt wie folgt: login.component.ts, das eine Schaltfläche enthält, die einen Dienst api.service.ts aufruft, der einen http get ausführt.

login.component.ts

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

api.service.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 ));
}

Kann mir jemand helfen, den Fehler zu überwinden? Ich habe a) CORS b) Serving statischer Dateien von server.js als 

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

c) dynamische Umgebungsvariable ..__ Was fehlt mir noch?

2
Arup Sarkar

Für Angular 7 müssen Sie eine andere Implementierung durchführen. Aus der Winkeldokumentation müssen Sie eine Proxy.js-Datei erstellen:

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

Bearbeiten Sie den Pfad für Ihren eigenen Backend-Server.

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);

Fügen Sie dies später zu Ihrem package.json hinzu 

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

Und nennen Sie das mit:

npm start

Und in Ihrer app.js einfach hinzufügen:

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

Ich hatte das gleiche Problem und das Problem wurde gelöst. Ich hoffe, es hilft!

3
Freestyle09

Ich habe mit Angular cli und . Net Framework auf der Serverseite gearbeitet.

Um dieses Problem zu lösen, aktiviere ich die CORS-Interaktion auf der Serverseite mit den folgenden Schritten:

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

    Und dann in die WebApiConfig-Klasse:

  2. Hinzufügen using System.Web.Http.Cors;

  3. Inside Register (HttpConfiguration config) -Methode:

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

config.EnableCors(cors);

oder

var cors = new EnableCorsAttribute("*", "*", "*"); //Origin, headers, methods

config.EnableCors(cors);
2
David Q

Um alle Aufrufe für http://localhost:4200/api An einen Server umzuleiten, auf dem http://localhost:3000/api Ausgeführt wird, führen Sie die folgenden Schritte aus.

  1. Erstellen Sie eine Datei proxy.conf.json im Ordner projects src/neben package.json.

  2. Fügen Sie der neuen Proxy-Datei den folgenden Inhalt hinzu:

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

  3. Fügen Sie in der CLI-Konfigurationsdatei angular.json die Option proxyConfig zum Serving-Ziel hinzu:

    ... "architect": {"serve": {"builder": "@ angle-devkit/build-angular: dev-server", "options": {"browserTarget": "your-application-name: build" , "proxyConfig": "src/proxy.conf.json"}, ...

  4. Rufen Sie ng serve auf, um den dev-Server mit dieser Proxy-Konfiguration auszuführen.

2
TiyebM

Da Ihre Winkel-App auf dem Port 4200 und dem Backend auf dem Port 3000 ausgeführt wird, ist der Ursprung beider Anwendungen unterschiedlich. 

Um dieses Problem zu lösen, können Sie "nginx" in Ihrem Computer einrichten. 

Dadurch werden alle Ihre Anforderungen vom Winkel- und Backend-Server über den "nginx" -Server ausgeführt. So lösen Sie das Problem von CORS.

0
Saddam Pojee

Wenn dies nur für die Entwicklung gedacht ist, empfehle ich die Verwendung von Proxy, das mit angle-cli ..__ geliefert wird. Erstellen Sie eine Datei mit dem Namen proxy.json

und 

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

und der Aufruf ng serve --proxy-config proxy.json. Wenn Sie davon ausgehen, dass dies immer noch ein Problem in der Produktion ist, müssen wir uns ausführlicher unterhalten. 

Vollständige Dokumentation: https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md

Was genau ist CORS: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

0
piotr szybicki

Ich habe den Callback-Mechanismus geändert, um das CORS-Problem zu überwinden. Ich verwende einen OAuth-Fluss, damit der Benutzer sich von https://example.com authentifiziert, der zu https://example.com/ umgeleitet wurde. auth/callback , Ich initiierte die Anfrage von http: // localhost: 4200 und sendete dann die Callback - URL an den Server http: // localhost: 3000 und ich erhielt den CORS - Fehler .

Jetzt leite ich es an den Client http: // localhost: 4200 und habe das CORS-Problem überwunden. Alle anderen Aufrufe für GET, POST, DELETE, PATCH stammen von http: // localhost: 3000 , was einwandfrei funktioniert.

Vielen Dank für Ihre Beiträge.

0
Arup Sarkar

Ich weiß, dass dies bereits beantwortet wurde, aber es könnte jemandem helfen, der nach einem CORS-Problem sucht. Sie können die folgenden 3 Schritte ausführen, um dieses Problem zu beheben. 1. Erstellen Sie die Datei proxy.conf.json und legen Sie sie im Stammverzeichnis Ihrer App ab. 2. Fügen Sie in der Datei package.json den Proxy-Parameter in ngstart hinzu. 3. Fügen Sie in angle.json den Proxy-Dateieintrag hinzu. 4. Ändern Sie alle Ihre restlichen Aufrufe in so etwas wie/api/getData.

Eine vollständige schrittweise Anleitung finden Sie hier. http://www.codeyourthought.com/angular/proxy-to-make-http-call-in-angular/

0
Ankit21ks