ajax – 为什么React fetch()向服务器发送2个请求？

我试图通过fetch()向服务器发送一个 AJAX请求：

fetch('/api/addUserObject',{
      method: 'POST',headers: {
        'Accept': 'application/json','Content-Type': 'application/json'
      },body: JSON.stringify({...this.state,token: this.props.userData.token,profile: this.props.currentProfile }),}).then(response => response.json())
      .then(data => {
        console.log(data);
      });

当我在Chrome中打开网络日志时,我看到如下内容：

那么为什么有2个请求而不是1个？它们都在服务器端被接受.

此请求由onClick事件处理：

<div className="btn" onClick={this.handleSubmit} /></div>

问题是,这是一个POST请求,我需要在此获取数据,因此一个请求(如果它发送标头以检查交叉原点),则在服务器上启动错误.

组件代码很大,所以我将它表示为：

<StyledDiv>
  <FormControl>...</FormControl>
  <FormControl>...</FormControl>
  <FormControl>...</FormControl>
  <FormControl>...</FormControl>
  <div className="btn" onClick={this.handleSubmit} /></div>
</StyiledDiv>

解决方法

我不知道为什么会发生这种情况.

出于安全原因,我抬头看了一下,发现了大约preflighted requests.

fetch将首先检查Web API以查看使用OPTION动词发送是否安全,当它正常时,它会使用您指定的动词POST再次发送请求.

所以这个问题似乎特定于fetch如何处理CORS.