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

Question

I found two same request in chrome devtool network when developing the angular4 project. Below is the code of http request: Notes: the code above is generated using 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);
}

Below is the code of invocation of the function userApplyLimitAsync():

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

userApplyLimitAsync() is the member of WithdrawServiceProxy, and _withdrawService is the instance of WithdrawServiceProxy. When I call the userApplyLimitAsync(), why does it create two same request? Two same requestsThe first oneThe second one

Answer 1

There are 2 requests but there is lots of diffrence between them.

1. The first request as you can see is OPTIONS request
2. Second one is : GET/POST/PUT/DELETE (Whichever request you made)

OPTIONS request is to check if the SERVER allows request operations i.e. GET/POST/PUT/DELETE (Whichever request you made).

These are defined at server at as
E.x.'Access-Control-Allow-Methods', 'POST'.

If the requested method is not allowed in above context then only OPTIONS request is called and will return an error.