单击提交按钮，Angular 7两次发送请求

Question

我已经创建了表单

<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代码

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

服务代码

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

当我单击“提交”按钮，然后检查“浏览器开发人员工具”部分时。在网络中，我看到该请求已发送两次，第一次为空白（未发送任何值。），第二次为带值。

您可以在这里create看到两次运行。当我点击首次创建通话

我从服务器收到空白响应，然后单击第二个create呼叫，

我有一个数组。 我无法理解为什么它第一次使用空白数据发送请求，而第二次使用正确的数据发送请求。我只需要打一个电话就可以得到正确的数据。

Answer 1

空白请求是OPTIONS请求，用于对服务器执行ping操作，以查看服务器是否在那里以及是否可以安全发送有效载荷，这也称为预检请求。第二个请求是带有数据的实际POST请求。

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

Answer 2

如果转到任何网络请求的标头选项卡，则将看到第一个请求是OPTIONS类型，第二个请求是您指定的方法。 OPTIONS请求是对服务器或该特定端点的通信测试。 https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/OPTIONS