React. js блокирующий заголовок

Question

Я делаю форму входа в систему, чтобы при отправке она вызывала мой внутренний API, она работала, но меня перенаправили на мой сервер React.

onSubmit = e => {
    Auth.authenticate(this.state.formFields);
    // e.preventDefault();
  };

<div className="grid-container">
        <center>
          <form className="card" onSubmit={this.onSubmit}>
            <span className="title">Login</span>
            <InputFields
              onChange={this.onChange}
              username={this.state.formFields.u}
              password={this.state.formFields.p}
            />
            <button className="submit-button">
              <FontAwesomeIcon icon={faChevronRight} />
            </button>
          </form>
        </center>
      </div>

Мой файл аутентификации:

const Auth = {
  isAuthenticated: false,
  authenticate(formFields) {
    axios
      .post("192.168.254.105:9999/login", { formFields })
      .then(response => {
        console.log(response);
        if (response.isAuthenticated == true) {
          this.isAuthenticated = response.isAuthenticated;
        }
      })
      .catch(error => console.log(error));
  },
  signout() {
    this.isAuthenticated = false;
  },
  getAuth() {
    return this.isAuthenticated;
  }
};

при отправке я перенаправлен на мой сервер React localhost:3000/login?p=ex&u=ex вместо этого он должен вызвать мой серверный API на localhost:9999/login

Обновление

Извините, мой плохой Я забыл добавить http в мой URL API, но теперь я получаю эту ошибку:

Access to XMLHttpRequest at 'http://192.168.254.105:9999/api/login' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

Answer 1

e.preventDefault() остановит вашу форму от повторной загрузки всей страницы. Похоже, это уже есть в вашем коде, но оно закомментировано.

// e.preventDefault();