Angular 2服务订阅了两次[重复]

Posted 2023-02-27

【中文标题】Angular 2服务订阅了两次[重复]

【英文标题】：Angular 2 services subscribed twice [duplicate]

【发布时间】：2017-04-19 04:41:11

【问题描述】：

我刚开始使用 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 请求

【问题讨论】：

请求之一是OPTIONS 和另一个POST 吗？

一个是选项请求，它检查服务器中的方法。然后发出实际的请求。

【参考方案1】：

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

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

跨域资源共享标准通过添加新的 HTTP 标头来工作，这些标头允许服务器描述允许使用 Web 浏览器读取该信息的源集。此外，对于可能对用户数据造成副作用的 HTTP 请求方法（特别是对于 GET 以外的 HTTP 方法，或者对于某些 MIME 类型的 POST 使用），规范要求浏览器“预检”请求，请求支持的方法使用 HTTP OPTIONS 请求方法从服务器发送，然后，在服务器“批准”后，使用实际 HTTP 请求方法发送实际请求。服务器还可以通知客户端是否应该将“凭据”（包括 Cookie 和 HTTP 身份验证数据）与请求一起发送。

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

【讨论】：

你说得对，第一个请求是OPTIONS，第二个是POST