title: Why does React fetch() send 2 requests to the server?
body: <p>I am trying to send an AJAX request to the server via <code>fetch()</code>:</p>
  
  <pre><code>    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 =&gt; response.json())
        .then(data =&gt; {
          console.log(data);
        });
  </code></pre>
  
  <p>When I open the network log in Chrome I see something like this:
  <img src="https://i.stack.imgur.com/UbJNm.png" alt="screenshot"></p>
  
  <p>So why are there 2 requests instead of 1? They are both accepted on the server side.</p>
  
  <p>This request is handled by an onClick event:</p>
  
  <pre><code>&lt;div className="btn" onClick={this.handleSubmit} /&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The problem is, that this is a POST request and I need to get data in this, so one request (if it sends headers to check for cross origin), initiates an error on the server.</p>
  
  <p>The component code is massive, so I will represent it as:</p>
  
  <pre><code>&lt;StyledDiv&gt;
    &lt;FormControl&gt;...&lt;/FormControl&gt;
    &lt;FormControl&gt;...&lt;/FormControl&gt;
    &lt;FormControl&gt;...&lt;/FormControl&gt;
    &lt;FormControl&gt;...&lt;/FormControl&gt;
    &lt;div className="btn" onClick={this.handleSubmit} /&gt;&lt;/div&gt;
  &lt;/StyiledDiv&gt;
  </code></pre>