Angular2 Http.get发送两个请求

Question

i have simple authentication service im using jwt token and after if ill need user detail for check authorization header and send request api end point but angular 2 request send first request Header empty key but second correct header let me explain

Network Operations http://pasteboard.co/c3wmFZvtJ.jpg

Wrong Header http://pasteboard.co/c3wDdFxMy.jpg

Correct Header http://pasteboard.co/1cKy9EHDy.jpg

My Http.Get Function

getUsers(): Observable<User[]> {
    // Authorization Tokeni Ayarlanıyor
    let headers = new Headers({ 'Authorization': this.authenticationService.token });
    let options = new RequestOptions({ headers: headers });
    // Kullanıcı Headeri Gönderiliyor
    return this.http.get('http://localhost/Hesap/Detay', options)
        .map((response: Response) => 
            response.json().detay
     ); 
}

i Call this Function Here

ngOnInit() {
    this.userService.getUsers()
        .subscribe(users => {
            this.users = users;
        });
}

Php Side

public function Detay(){
    echo $this->headers["authorization"];
    if(!isset($this->headers["authorization"]) || empty($this->headers["authorization"])){
        echo json_encode(array("Hata" => "Header Yok"));
    }else{
        $token = explode(" ", $this->headers["authorization"]);
        $user = JWT::decode(trim($token[0],'"'));
        $this->load->model("auth_model");
        if($this->auth_model->checkUser($user->id, $user->KullaniciAdi) !== false)
            {
                $this->load->model("user_model");
                $detay = $this->user_model->get($user->id, $user->KullaniciAdi);
                echo json_encode(
                    array( 
                            "detay"=> $detay
                    )
                );
            }
        }
}

Second Header can echo Token http://pasteboard.co/c3C6ed2k7.jpg

And Now THİS PROBLEM ONLY DEVELOPMENT MODE if i build prod project send one request

Answer 1

It looks like the first request is an OPTIONS request needed because of CORS .

If that is the case, there is nothing wrong with that. The browser needs to make a prior request to check if you can call the api and if the Headers you want are allowed.

The header Access-Control-Request-Headers checks if you can send the authorization header in your request.

The header Access-Control-Request-Method checks if you can send a GET request.

The preflight request only happens if the domain of the client is different from the domain of the api.

Take a look at this link .