Sending request twice on single click on submit button, Angular 7

Question

I have created form

<div class="clr-row campform">
    <form (ngSubmit)="onSubmit(f)" #f="ngForm">
        <div class="clr-col-12 gutterpadl gutterpadr">
            <h5>List Name</h5>
            <input type="text" name="listname" ngModel class="borderfield" required placeholder="Enter List Name">
        </div>
        <div class="clr-row autobtn">
            <button type="submit" class="btn btn-primary">Submit</button>
            <button type="reset" class="btn">Cancel</button>
        </div>
    </form>
</div>

TypeScript Code

onSubmit(form: NgForm) {
    const list = { 'listname': form.value.listname };
    this.dataManage.createList(list).subscribe(response => { console.log(response) });
    this.loadData();
  }

Service Code

createList(listname) {
    return this.httpClient.post(this.baseURL + 'data_list/create', listname, { headers: this.authService.getCredentialHeaders() });
  }

When I click on submit button, and I check on browser developer tools section. In the network I see that request was sent twice, first time blank (No any values sent.) and second time with values.

You can see here create run twice. When I click on first create call

I get the blank response from server, And when I click on second create call,

I got an array. I am unable to understand why it is sending request first time with blank data and second time with correct data. I only need one call with correct data.

Sounds like the pre-flight request done by browsers. See this for more information. Check the method of the first request. If it is part of the pre-flight check it should have the OPTIONS method. — Mathyn
– Mathyn, Commented Jul 3, 2019 at 13:06
Exactly what @Mathy said. It check whether request is trusted, if yes then only call the actual call. — Saima Haji
– Saima Haji, Commented Jul 3, 2019 at 13:11

Qellson · Accepted Answer · 2019-07-03 13:10:44Z

1

The blank request is the OPTIONS request that serves to ping the server to see if its there and if its safe to send the payload also called a preflight request. The second request is the actual POST request with the data.

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Preflighted_requests

answered Jul 3, 2019 at 13:10

Qellson

5522 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ashish S · Accepted Answer · 2019-07-03 13:11:34Z

1

If you go to the headers tab of any network request, then you will see the first request is OPTIONS type and the second request is whatever the method you have specified. The OPTIONS request is kind of communication test to the server or that particular end point. https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/OPTIONS

answered Jul 3, 2019 at 13:11

Ashish S

7481 gold badge7 silver badges14 bronze badges

Collectives™ on Stack Overflow

Sending request twice on single click on submit button, Angular 7

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related