角度2のサービスを2回購読しました

Question

私は角度2で最初のプロジェクトを開始しましたが、サービスに問題があります。

フォームを送信するときにhttpサービスが呼び出されましたが、フォームを送信するとhttpリクエストが2回実行されます。

login.component.html

<form method="post" (ngSubmit)="login()"> 
    <input type="email" [(ngModel)]="user.email" id="email" name="email" placeholder="Email" class="input input--block input--text-center" required > 
    <input type="password" [(ngModel)]="user.password" name="password" placeholder="Password" id="passord" class="input input--block input--text-center" required> 
    <input type="submit" value="Connect" class="btn btn--block"> 
</form> 

login.component.ts

login() { 
    this.service.login(this.user.email, this.user.password) 
     .subscribe(res => { 
      if (res == null) { 
       alert("Fail"); 
      } else { 
       res.password = null; 
       this.user = res; 
       alert("Welcome "+this.user.firstname+"!"); 
     } 
    }); 
} 

user.service.ts

login(email:string, password:string): Observable<User> { 
    let CryptoJS = require("cryptojs"); 
    let sha512 = CryptoJS.algo.SHA512.create(); 
    sha512.update(password); 
    password = sha512.finalize().toString(); 
    return this.http.post(`${this.baseUrl}/user/login`, 
     {email: email.trim(), password: password.trim()}, 
     {headers: this.headers }) 
    .map(res => res.json()) 
    .catch(this.handleError); 
} 

私は2回呼び出されたメソッドをチェックするためにいくつかのconsole.log("test");を追加し、それが二回と呼ばれる無方法、私は、Webブラウザ

Answer 1

のネットワークコンソールで見ることができるだけでHTTP要求がないように見える私はあなたがOPTIONSとPOSTを混乱していると思います

OPTIONS要求がクロスオリジンリソースは、サーバーがorigiのセットを記述することができ、新たなHTTPヘッダを追加することにより、標準の作品を共有

クロスオリジンリソースの共有のために不可欠であり、二重POST要求と要求ウェブブラウザを使用してその情報を読み取ることを許可されている。さらに、ユーザーデータ（特にGET以外のHTTPメソッドや特定のMIMEタイプのPOST使用）に対して副作用を引き起こす可能性のあるHTTPリクエストメソッドの場合、ブラウザは要求を「プリフライト」してサポートされているメソッドを勧めるHTTP オプション要求メソッドを使用してサーバーから「承認」し、実際のHTTP要求メソッドを使用して実際の要求を送信します。サーバーは、「クレデンシャル」（クッキーとHTTP認証データを含む）をリクエストとともに送信する必要があるかどうかをクライアントに通知することもできます。

参考：https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS