为什么Chrome DevTool Network 在aspnetboilerplate 的angular4 项目中有两个相同的请求？

Question

我在开发angular4项目时在chrome devtool网络中发现了两个相同的请求。 http请求代码如下：注：以上代码是使用nswag生成的。

userApplyLimitAsync(): Observable<GetUserApplyLimitOutput> {
    let url_ = this.baseUrl + "/api/services/app/AElfApplication/UserApplyLimitAsync";
    url_ = url_.replace(/[?&]$/, "");

    let options_ = {
        method: "post",
        headers: new Headers({
            "Content-Type": "application/json",
            "Accept": "application/json"
        })
    };

    return this.http.request(url_, options_).flatMap((response_) => {
        return this.processUserApplyLimitAsync(response_);
    }).catch((response_: any) => {
        if (response_ instanceof Response) {
            try {
                return this.processUserApplyLimitAsync(response_);
            } catch (e) {
                return <Observable<GetUserApplyLimitOutput>><any>Observable.throw(e);
            }
        } else
            return <Observable<GetUserApplyLimitOutput>><any>Observable.throw(response_);
    });
}

protected processUserApplyLimitAsync(response: Response): Observable<GetUserApplyLimitOutput> {
    const status = response.status;

    let _headers: any = response.headers ? response.headers.toJSON() : {};
    if (status === 200) {
        const _responseText = response.text();
        let result200: any = null;
        let resultData200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
        result200 = resultData200 ? GetUserApplyLimitOutput.fromJS(resultData200) : new GetUserApplyLimitOutput();
        return Observable.of(result200);
    } else if (status !== 200 && status !== 204) {
        const _responseText = response.text();
        return throwException("An unexpected server error occurred.", status, _responseText, _headers);
    }
    return Observable.of<GetUserApplyLimitOutput>(<any>null);
}

下面是函数的调用代码userApplyLimitAsync():

this._withdrawService.userApplyLimitAsync()
    .subscribe((result) => {
            this.withdrawActive = result.isSucceed;
        });

userApplyLimitAsync()是WithdrawServiceProxy的成员，_withdrawService是WithdrawServiceProxy的实例。当我调用 userApplyLimitAsync() 时，为什么它会创建两个相同的请求？ Two same requestsThe first oneThe second one

Answer 1

不同的请求。甚至不是相同的 HTTP 动词。您应该研究 HTTP 动词，主要是 OPTIONS 和 POST.

Answer 2

有2个请求，但是它们之间有很多不同。

您看到的第一个请求是 OPTIONS 请求
第二个是：GET/POST/PUT/DELETE（无论您提出什么要求）

OPTIONS请求是检查SERVER是否允许请求操作即GET/POST/PUT/DELETE（无论哪个您提出的要求）。

这些在服务器上定义为
E.x.'Access-Control-Allow-Methods', 'POST'.

如果在上述上下文中不允许请求的方法，则只会调用 OPTIONS 请求，并且会 return 出错。

Answer 3

The Cross-Origin Resource Sharing 标准通过添加新的 HTTP headers 来工作，该 HTTP headers 允许服务器描述允许使用网络浏览器读取该信息的来源集。

此外，对于可能导致服务器数据 side-effects 的 HTTP 请求方法（特别是对于除 GET 之外的 HTTP 方法，或对于某些 MIME 类型的 POST 使用），规范要求浏览器 preflight the request, soliciting supported methods from the server with an HTTP OPTIONS 请求方法，然后，根据服务器 "approval"，使用实际 HTTP 请求方法发送实际请求。

服务器还可以通知客户端是否"credentials"（包括 Cookie 和 HTTP 身份验证数据）应该随请求一起发送。

为什么Chrome DevTool Network 在aspnetboilerplate 的angular4 项目中有两个相同的请求？

Why does Chrome DevTool Network have two same request in angular4 project of aspnetboilerplate?

rxjs

aspnetboilerplate

angular