Angular :httpClient 请求被调用两次

Question

我正在尝试按如下方式调用我的 api:

我的组件.ts:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { ActivatedRoute } from '@angular/router';
import { Api } from '../../services/Api';
import { Account } from '../../models/Account';

@Component({
  selector: 'app-account-individual',
  templateUrl: './account-individual.component.html',
  styleUrls: ['./account-individual.component.css']
})
export class AccountIndividualComponent implements OnInit {

  account_id: number;
  account: Account = new Account();

  constructor(private route: ActivatedRoute, private proxy: Api) {
    this.proxy.postClient('api-get?call=get-account', { "id": 1 }).subscribe(
      res => {
        console.log(res);
      }
    );
  }

  ngOnInit() {
    this.route.params.subscribe(params => {
      this.account_id = params['id'];
    });
  }
}

API.ts:

import { Injectable } from '@angular/core';
import { Http, Headers, Response, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
import * as Globals from 'Globals';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class Api {

    api_url = "http://localhost/MyProject/";

    constructor(private http: Http, private httpClient: HttpClient) { }

    fetchData(url) {
        return this.http.get(this.api_url + url).map(this.extractData).catch(this.handleErrorPromise);
    }

    postClient(url: string, data?: any){
        return this.httpClient.post(this.api_url + url, data);
    }

    private extractData(res: Response) {
        let body = res.json();
        return body||{};
    }

    private handleErrorObservable(error: Response | any) {
        console.error(error.message || error);
        return Observable.throw(error.message || error);
    }

    private handleErrorPromise(error: Response | any) {
        console.error(error.message || error);
        return Promise.reject(error.message || error);
    }
}

服务器 CORS:

public function actionApiGet($call){
        header('Access-Control-Allow-Origin: *');
        header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
        header('Access-Control-Allow-Headers: x-test-header, Origin, X-Requested-With, Content-Type, Accept');
        $data = json_decode(file_get_contents('php://input'), true);
...

但是api被调用了两次，第一次是OPTIONS，第二次是POST

Answer 1

如果您正在调用其他服务器上托管的某些服务，这是预期的行为，浏览器需要验证当前客户端是否托管在有效服务器上