React.js blocking header

Question

I'm making a login form that when it submits it should call my back end API, it works but I get redirected to my React server.

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>

My authentication file:

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;
  }
};

on submit I get redirected to my React server localhost:3000/login?p=ex&u=ex instead it should call my server API on localhost:9999/login

Update

Sorry my bad I forgot to add http on my api url, but now I get this error:

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.

Since you turned the fix into a comment, the form still gets also submitted the regular way, which without method or action attributes defaults to GET and the current URL. — user5734311
– user5734311, Commented Feb 8, 2020 at 12:52

Jamie Dixon · Accepted Answer · 2020-02-08 12:51:10Z

1

e.preventDefault() will stop your form from re-loading the entire page. It looks like you already have this in your code but it's commented out.

// e.preventDefault();

answered Feb 8, 2020 at 12:51

Jamie Dixon

54.1k21 gold badges131 silver badges168 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React.js blocking header

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related