web-dev-qa-db-de.com

Die Proxy-Konfiguration funktioniert nicht in Winkel 6

Ich habe die metrische Version von Angular Version.5.5.2 und versuche, die Version Angular in meine Backend-API zu integrieren.

Da ich das alles ziemlich neu bin, ist das Problem nun mit meiner Proxy-Konfiguration, die nicht meinen Erwartungen entspricht. 

Im Folgenden finden Sie den Code der Datei proxyconfig.json

{
    "/api": {
        "target": "https://localhost:5001",
        "secure": false,
        "changeOrigin": true,
        "logLevel": "debug"
    }
}

Das Bild zeigt, dass die Anforderung an die URL "https: // localhost: 5001/api/auth/login" geleitet wird POST/api/auth/login -> https: // localhost: 5001

In der Browserkonsole wird diese Anforderung jedoch an die URL http: // localhost: 4200/api/auth/login weitergeleitet, die den Fehler 401 zurückgibt. Ich kann beim Klicken auf die Schaltfläche nicht zur URL weiterleiten: https: // localhost: 5001/api/auth/login

Es folgt der HTML-Code

<!--begin::Form-->
<form class="m-login__form m-form" name="form" (ngSubmit)="f.form.valid && submit()" #f="ngForm" novalidate>
    <div class="form-group">
        <mat-form-field>
            <mat-label>Email</mat-label>
            <input matInput type="email" name="email" placeholder="Email address" autocomplete="off" [(ngModel)]="model.email" #email="ngModel" email="true" required>
        </mat-form-field>
    </div>
    <div class="form-group">
        <mat-form-field>
            <mat-label>Password</mat-label>
            <input matInput minlength="4" type="password" name="password" placeholder="Password" autocomplete="off" [(ngModel)]="model.password" #password="ngModel" required>
        </mat-form-field>
    </div>
</form>
<!--end::Form-->

<!--begin::Action-->
<div class="m-login__action m-login__action--fit">
    <a href="javascript:;" (click)="forgotPasswordPage($event)" class="m-link">
        <span translate="AUTH.GENERAL.FORGOT_BUTTON">Forgot Password?</span>
    </a>
    <m-spinner-button [options]="spinner" (click)="submit()">{{'AUTH.LOGIN.BUTTON' | translate}}</m-spinner-button>
</div>

Es folgt der Code login.component.ts

submit() {
        this.spinner.active = true;
        if (this.validate(this.f)) {
            this.authServiceDb.logindb(this.model).subscribe(response => {
                    this.router.navigate(['/']);
                    this.alertify.success('Logged In Successfully');
                    this.spinner.active = false;
                    this.cdr.detectChanges();
            }, error => {
                this.alertify.error(error);
            });
        }
    }

funktion der Code für Authdb exportierte Klasse wird geblasen, Bearbeiten

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions, Response } from '../../../node_modules/@angular/http';
import { map, catchError } from 'rxjs/operators';
import { throwError } from '../../../node_modules/rxjs';
import { tokenNotExpired, JwtHelper } from 'angular2-jwt';

@Injectable({
    providedIn: 'root'
})
export class AuthdbService {
    baseUrl = 'api/auth/';
    userToken: any;
    decodedTokenn: any;
    jwtHelper: JwtHelper = new JwtHelper();
    constructor(private http: Http) { }
public logindb(model: any) {
    return this.http.post(this.baseUrl + 'login', model, this.requestOptions()).pipe(map((response: Response) => {
      const user = response.json();
      if (user) {
        localStorage.setItem('token', user.tokenString);
        this.decodedTokenn = this.jwtHelper.decodeToken(user.tokenString);
        this.userToken = user.tokenString;
      }
    })).pipe(catchError(this.handleError));
  }
  register(model: any) {
    return this.http.post(this.baseUrl + 'register', model, this.requestOptions()).pipe(catchError(this.handleError));
  }
  loggedIn() {
    return tokenNotExpired('token');
  }
  private requestOptions() {
    const headers = new Headers({
      'Content-type': 'application/json'});
    return new RequestOptions({headers: headers});
  }
  private handleError(error: any) {
    const applicationError = error.headers.get('Application-Error');
    if (applicationError) {
      return throwError(applicationError);
    }
    const serverError = error.json();
    let modelStateErrors = '';
    if (serverError) {
      for (const key in serverError) {
        if (serverError[key]) {
          modelStateErrors += serverError[key] + '\n';
        }
      }
    }
    return throwError(
      modelStateErrors || 'Server Eroor'
    );
  }
}

Und in Mein package.json habe ich den folgenden Code

{
    "name": "default",
    "version": "0.0.0",
    "license": "MIT",
    "scripts": {
        "ng": "ng",
        "start": "ng serve --proxy-config proxyconfig.json",
        "build": "ng build --prod",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
        "@angular/animations": "^6.1.0",
        "@angular/cdk": "^6.4.0",
        "@angular/common": "^6.1.0",
        "@angular/compiler": "^6.1.0",
        "@angular/forms": "^6.1.0",
        "@angular/http": "^6.1.0",
        "@angular/platform-browser": "^6.1.0",
        "@angular/platform-browser-dynamic": "^6.1.0",
        "@angular/platform-server": "^6.1.0",
        "@angular/router": "^6.1.0",
        "@kolkov/angular-editor": "^0.10.3",
        "@ng-bootstrap/ng-bootstrap": "^2.2.0",
        "@ngx-loading-bar/core": "^2.1.1",
        "@ngx-translate/core": "^10.0.2",
        "@types/lodash": "^4.14.112",
        "alertifyjs": "^1.11.1",
        "angular-in-memory-web-api": "^0.6.0",
        "angular2-jwt": "^0.2.3",
        "chart.js": "^2.7.2",
        "classlist.js": "^1.1.20150312",
        "core-js": "^2.5.7",
        "hammerjs": "^2.0.8",
        "lodash": "^4.17.10",
        "material-design-icons": "^3.0.1",
        "ng2-charts": "^1.6.0",
        "ngx-auth": "4.0.0",
        "ngx-highlightjs": "^2.0.4",
        "ngx-perfect-scrollbar": "^6.2.0",
        "ngx-permissions": "^5.0.0",
        "object-path": "^0.11.4",
        "rxjs-compat": "^6.2.2",
        "rxjs-tslint": "^0.1.5",
        "web-animations-js": "^2.3.1",
        "zone.js": "^0.8.26"
    },
    "devDependencies": {
        "@angular-devkit/build-angular": "^0.7.0",
        "@angular/cli": "^6.0.8",
        "@angular/compiler-cli": "^6.1.0",
        "@angular/core": "^6.1.0",
        "@angular/language-service": "^6.1.0",
        "@angular/material": "^6.4.0",
        "@angular/material-moment-adapter": "^6.4.0",
        "@types/jasmine": "^2.8.8",
        "@types/jasminewd2": "^2.0.3",
        "@types/node": "^10.5.2",
        "codelyzer": "^4.4.2",
        "jasmine": "^3.1.0",
        "jasmine-core": "^3.1.0",
        "jasmine-spec-reporter": "~4.2.1",
        "karma": "~2.0.4",
        "karma-chrome-launcher": "^2.2.0",
        "karma-coverage-istanbul-reporter": "^2.0.1",
        "karma-jasmine": "^1.1.2",
        "karma-jasmine-html-reporter": "^1.2.0",
        "moment": "^2.22.2",
        "protractor": "^5.3.2",
        "rxjs": "^6.2.2",
        "ts-node": "^6.0.3",
        "tslint": "~5.9.1",
        "TypeScript": "2.7.2"
    }
}
3
Hafiz Siddiq

Ich hatte das gleiche Problem und die Option proxyConfig zum Serveziel hinzugefügt, erledigte den Job. 

Gehe zu angle.json -> im Aufschlag füge den Schlüssel hinzu: Wertepaar "proxyConfig": "proxy.conf.json"

so was -

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

Übrigens, ich habe das von hier

3
N K

Füge den Parameter "--ssl" zu ng serve hinzu:

"start": "ng serve --proxy-config proxyconfig.json --ssl",

weil Sie eine sichere Verbindung aufbauen wollen:

"target": "https://localhost:5001",

quelle: https://www.devdungeon.com/content/how-serve-angular-locally-over-https

0
Balazs F.

Ich habe ein paar Stunden gebraucht, um ein falsches Routing von POST/api/auth/login in https: // localhost: 5001 zu beheben, das sich in dem von Ihnen bereitgestellten Bild befindet.

Die folgende Konfiguration behebt das Routing von POST/api/auth/login auf https: // localhost: 5001/api/auth/login .

{
    "/api": {
        "target": "https://localhost:5001/api",
        "changeOrigin": true,
        "logLevel": "debug",
        "pathRewrite": { "^/api" : "" }
    }
}
0
Mandakh

Sie sagten, Sie sind neu in diesem Bereich, lassen Sie mich zuerst etwas einfaches erklären.

Wenn Sie http.post aufrufen, ist der erste Parameter die URL, die kontaktiert wird. So:

this.http.post(this.baseUrl + 'login', ...

wird werden

this.http.post('api/auth/login', ...

weil Sie baseUrl gesetzt und "login" hinzugefügt haben:

baseUrl = 'api/auth/';

Ihr Code sagt jedoch nicht aus, welches Protokoll verwendet werden soll (http oder https) NOR, welche Domäne: Port aufgerufen werden soll (z. B. http: // meineDomäne: port/api/auth/login ).

Daher wird Angular standardmäßig auf 'http' und auf die Domäne und den Port gesetzt, die von der IT verwendet werden. Dies ist localhost: 4200. Ihre Anfrage wird also zu:

http: // localhost: 4200/api/auth/login

Deshalb sehen Sie das in der Konsole. Angular ignoriert Ihre Proxy-Datei vollständig. Ich denke, der Grund ist entweder der Name oder der Speicherort (normalerweise sollte es sich im Stammverzeichnis des Projekts befinden) oder Sie haben Angular nicht angewiesen, es zu laden.

Sie müssen Angular anweisen, es beim Start tatsächlich zu verwenden. In package.json brauchst du so etwas:

"start": "ng serve --proxy-config proxyconfig.json"

Dies teilt Angular-CLI mit, dass beim Starten der Anwendung mit dem Befehl npm run start (oder einfach npm start) die Proxy-Daten aus dieser Json-Datei im Stammordner geladen werden sollten.

Ich würde raten, dieses Tutorial auch zu lesen.

Ich denke auch, dass Sie /* in Ihrer Proxyconfig vermisst haben:

{
    "/api/*": {
        "target": "http://localhost:5001",
        "secure": false,
        "changeOrigin": true,
        "logLevel": "debug"
    }
}
0
rmcsharry