Angular 2 项服务订阅了两次

Question

我刚开始第一个项目 Angular 2，我遇到了服务问题。

我在提交表单时调用了一个 http 服务，但是当我提交表单时，http 请求被执行了两次。

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

我添加了一些console.log("test");来检查哪个方法被调用了两次，似乎没有被调用两次的方法，只是我可以在网络浏览器的网络控制台中看到的 HTTP 请求

Answer 1

我认为您混淆了 OPTIONS 和 POST 请求与双重 POST 请求

OPTIONS 请求对于跨源资源共享至关重要

The Cross-Origin Resource Sharing standard works by adding new HTTP headers that allow servers to describe the set of origins that are permitted to read that information using a web browser. Additionally, for HTTP request methods that can cause side-effects on user data (in particular, for HTTP methods other than GET, or for POST usage with certain MIME types), the specification mandates that browsers "preflight" the request, soliciting supported methods from the server with an HTTP OPTIONS request method, and then, upon "approval" from the server, sending the actual request with the actual HTTP request method. Servers can also notify clients whether "credentials" (including Cookies and HTTP Authentication data) should be sent with requests.

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

Angular 2 项服务订阅了两次

Angular 2 services subscribed twice

angular-http

angular-services

angular