web-dev-qa-db-fra.com

La configuration du proxy ne fonctionne pas dans l'angle 6

J'ai la version angulaire de metronic_v5.5.2 et j'essaie d'intégrer sa version angulaire à mon API backend.

Comme je suis assez nouveau pour tout cela, le problème vient maintenant de ma configuration de proxy qui ne fonctionne pas conformément à mes attentes. 

Voici le code du fichier proxyconfig.json

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

L'image montre que la demande est acheminée vers l'URL "https: // localhost: 5001/api/auth/login" POST/api/auth/login -> https: // localhost: 5001

Mais dans la console des navigateurs, cette requête est en fait routée vers l’URL http: // localhost: 4200/api/auth/login qui renvoie une erreur 401. Je ne peux pas acheminer en cliquant sur le bouton à l'URL: https: // localhost: 5001/api/auth/login

Voici le code HTML

<!--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>

Voici le 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);
            });
        }
    }

fonctionne le code pour authdb classe exportée est donné coup, Modifier

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

Et dans mon package.json j'ai le code suivant

{
    "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"
    }
}
angularangular-ui-routerangular6asp.net-core-webapi
3
Hafiz Siddiq

J'ai eu ce même problème et l'ajout de l'option proxyConfig à la cible de service a fait le travail. 

Allez dans angular.json -> dans le service, ajoutez la clé: paire de valeurs "proxyConfig": "proxy.conf.json"

comme ça -

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

d'ailleurs, je l'ai eu de ici

3
N K

Il m'a fallu quelques heures pour corriger le routage incorrect de POST/api/auth/login to https: // localhost: 5001 qui se trouve dans l'image fournie.

La configuration suivante corrige le routage de POST/api/auth/login vers https: // localhost: 5001/api/auth/login .

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

Vous avez dit que vous êtes nouveau dans ce domaine, alors laissez-moi vous expliquer quelque chose de simple en premier.

Lorsque vous appelez http.post, le premier paramètre est l'URL qui sera contactée. Alors:

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

va devenir

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

car vous avez défini baseUrl et ajouté 'login':

baseUrl = 'api/auth/';

Mais votre code ne dit pas quel protocole utiliser (http ou https) NOR quel domaine: port appeler (par exemple. http: // mydomain: port/api/auth/login ).

Par conséquent, Angular choisira par défaut "http", ainsi que le domaine et le port utilisés par le service informatique, à savoir localhost: 4200. Votre demande devient alors:

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

C'est pourquoi vous voyez cela dans la console. Angular ignore complètement votre fichier proxy. Je pense que la raison en est soit le nom, soit l'emplacement (normalement, il devrait se trouver dans le dossier racine de votre projet), soit vous n'avez pas dit à Angular de le charger.

Vous devez dire à Angular de l'utiliser réellement au démarrage. Donc, dans package.json, vous avez besoin de quelque chose comme ceci:

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

Cela indique à Angular-CLI que lorsque vous utilisez la commande npm run start (ou simplement npm start) pour démarrer l’application, il convient de charger les données de proxy à partir de ce fichier json situé dans le dossier racine.

Je conseillerais de lire ce tutoriel aussi.

De plus, je pense qu'il vous manque /* dans votre proxyconfig:

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