Почему React fetch () отправляет 2 запроса на сервер?

Question

Я пытаюсь отправить запрос AJAX на сервер через fetch():

    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>

Answer 1

Я сам не знал, почему это происходит.

Я немного поднял глаза и узнал о предварительно выданных запросах по соображениям безопасности.

fetch сначала проверит Web API, чтобы увидеть, безопасно ли отправлять, используя глагол OPTION, и когда все в порядке, он отправляет запрос снова, используя указанный глагол, POST в вашем случае.

Таким образом, проблема, похоже, связана с тем, как fetch обрабатывает CORS .