Angular2 Http.get 发送两个请求

Question

我有简单的身份验证服务，我使用 jwt 令牌，如果我需要用户详细信息来检查授权标头并发送请求 api 端点，但 angular 2 请求发送第一个请求标头为空键，但第二个正确的标头让我解释一下

网络运营 http://pasteboard.co/c3wmFZvtJ.jpg

错误的标题 http://pasteboard.co/c3wDdFxMy.jpg

正确的标题 http://pasteboard.co/1cKy9EHDy.jpg

我的 Http.Get 函数

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

我在这里调用这个函数

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

PHP端

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

第二个Header可以echo Token http://pasteboard.co/c3C6ed2k7.jpg

现在，如果我构建 prod 项目发送一个请求，那么这只是开发模式的问题

Answer 1

看起来第一个请求是OPTIONS需要的请求，因为CORS.

如果真是这样，那也没什么不对。浏览器需要预先请求以检查您是否可以调用 api 以及您想要的 Headers 是否被允许。

标头Access-Control-Request-Headers检查您是否可以authorization在请求中发送标头。

标头Access-Control-Request-Method检查您是否可以发送GET请求。

仅当客户端的域与 api 的域不同时，才会发生预检请求。

看看这个链接。