httpClient請求在angular4中被調用了兩次

Question

我使用httpClient在我的angular4應用程序中調用了API，但是該API被調用了兩次，第一個調用方法是OPTIONS，第二個調用方法是Get。

Component.ts： -

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { UserService } from './Services/User.service';

@Component({
  selector: 'user-component',
  templateUrl: './user-component.component.html',
  styleUrls: ['./user-component.component.scss'],
  encapsulation: ViewEncapsulation.None
})

export class UserComponent implements OnInit {

  apiResponse : any;
  status      : any = 'active';

  constructor(private service: UserService) { } 

  ngOnInit() {
     this.getResult();
  }

  getResult()
  {
     this.service.getUser(this.status)
     .subscribe(res => {this.apiResponse = res},
                err => console.log(err),
                ()  => console.log(this.apiResponse)  
              );

  }
}

Component.html： -

<pre>{{apiResponse |json}}</pre>

User.service.ts： -

import { Injectable,Inject } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import 'rxjs/add/operator/map';

interface Response {
  response : any;
}

@Injectable()
export class UserService {
  apiUrl : any='http://localhost/MyProject/';
  constructor( private http: HttpClient) {}

  public getUser(status: any)
  {
     let httpParams = new HttpParams().set('status', status);
     return this.http.get<Response>(this.apiUrl+"users", {params: httpParams}).map(response => response.response);
  }
}

該API調用了兩次，請告訴我如何解決此問題？

Answer 1

OPTIONS請求是自動的。 你無法避免。

從MDN

HTTP OPTIONS方法用於描述目標資源的通信選項。 客戶端可以為OPTIONS方法指定特定的URL，也可以為星號（*）指定整個服務器。