web-dev-qa-db-ja.com

angular 6でプロキシ設定が機能していません

Metronic_v5.5.2 Angularバージョンであり、そのangularバージョンを私のバックエンドAPIと統合しようとしています。

私はこれらすべてにかなり慣れていないので、問題は私の期待どおりに動作しないプロキシ設定にあります。

以下はproxyconfig.jsonファイルのコードです

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

画像は、リクエストがURL "https：// localhost：5001/api/auth/login"にルーティングされていることを示していますPOST/api/auth/login-> https： // localhost：5001

しかし、ブラウザのコンソールでは、このリクエストは実際にはURL http：// localhost：4200/api/auth/login にルーティングされ、401エラーが返されます。ボタンをクリックしてURLにルーティングできない： https：// localhost：5001/api/auth/login

次は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>

以下は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);
            });
        }
    }

関数authdbエクスポートクラスのコードに打撃が与えられ、編集

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

そして、私のpackage.jsonには次のコードがあります

{
    "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
9
Hafiz Siddiq

これと同じ問題があり、proxyConfigオプションをサーブターゲットに追加することでうまくいきました。

Angular.jsonに移動し、サーブ内でキーと値のペアを追加します"proxyConfig": "proxy.conf.json"

このような -

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

ところで、私はこれを here から取得しました

5
N K

あなたはこれが初めてだと言ったので、まず簡単なことを説明しましょう。

Http.postを呼び出すとき、最初のパラメーターは接続されるURLです。そう：

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

となります

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

baseUrlを設定し、「ログイン」を追加したため：

baseUrl = 'api/auth/';

しかし、コードはどのプロトコルを使用するか（httpまたはhttps）NORどのdomain：portを呼び出すかを言っていません（例 http：// mydomain：port/api/auth /ログイン ）。

したがって、Angularはデフォルトで「http」になり、ITが使用しているドメインとポート（localhost：4200）になります。したがって、リクエストは次のようになります。

http：// localhost：4200/api/auth/login

それがコンソールでそれを見る理由です。 Angularはプロキシファイルを完全に無視します。理由は名前または場所（通常はプロジェクトのルートフォルダにあるはずです）またはAngularをロードするように言っていない。

起動時に実際に使用するには、Angularと伝える必要があります。したがって、package.jsonでは、次のようなものが必要です。

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

これは、Angular-CLIにnpm run start （あるいは単に npm start）アプリを起動するコマンド、ルートフォルダー内のそのjsonファイルからプロキシデータを読み込む必要があります。

このチュートリアル も読むことをお勧めします。

また、あなたは/* proxyconfigにありません：

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

POST/api/auth/login to https：// localhost：5001 これは提供した画像にあります）の誤ったルーティングを修正するのに数時間かかりました。

以下の設定により、POST/api/auth/login to https：// localhost：5001/api/auth/login のルーティングが修正されます。

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

「--ssl」パラメーターをng serveに追加します。

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

安全な接続を構築したいため：

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

ソース： https://www.devdungeon.com/content/how-serve-angular-locally-over-https

0
Balazs F.