Unhandled Rejection (TypeError): Failed to fetch (POST) react / node / express

Question

I'm trying to build a Login / Register form with react and node / express / (mongo) as my backend. The backend works fine. When I send a POST request (with postman) to /register, everything works fine and the credentials are stored in the DB.

I tried to implement the form now with react on the client-side, but when I try to POST I always get the error: Unhandled Rejection (TypeError): Failed to fetch.

This is my code:

import React, { Component } from 'react';

class Register extends Component {
  state = { email: '', password: '' };

  handleInputChange = event => {
    const { value, name } = event.target;
    this.setState({
      [name]: value
    });
  };

  onSubmit = event => {
    event.preventDefault();
    fetch('localhost:3000/register', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        email: this.state.email,
        password: this.state.password
      })
    });
  };

  render() {
    return (
      <form onSubmit={this.onSubmit} noValidate>
        <h1>Login</h1>
        <input
          type="email"
          name="email"
          placeholder="Enter email"
          value={this.state.email}
          onChange={this.handleInputChange}
        />
        <input
          type="password"
          name="password"
          placeholder="Enter password"
          value={this.state.password}
          onChange={this.handleInputChange}
        />
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

export default Register;

Help would be appreciated:)

SuleymanSah · Accepted Answer · 2020-04-03 12:14:27Z

3

You need to use then block to actually call your api.

  onSubmit = event => {
    event.preventDefault();
    fetch("localhost:3000/register", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        email: this.state.email,
        password: this.state.password
      })
    })
      .then(res => {
        console.log("response: ", res);
      })
      .catch(err => {
        console.log("error:", err);
      });
  };

answered Apr 3, 2020 at 12:14

SuleymanSah

18k6 gold badges38 silver badges60 bronze badges

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

4 Comments

SuleymanSah Over a year ago

@hallowed that's a cors problem, you need to enable cors on your api, there are lots of answers about cors here at stackoverflow.

itsame Over a year ago

I accidentally deleted my comment... For everyone who may be reading this, the comment was: "I'm now getting: Fetch API cannot load localhost:5000/register. URL scheme must be "http" or "https" for CORS request." I already enabled cors. The problem was, that I wrote localhost:5000 instead of localhost:5000... oof

SuleymanSah Over a year ago

@hallowed it is a new problem about cors. Check this question and answer stackoverflow.com/questions/48728334/…

itsame Over a year ago

It's not really a problem. You just have to serve your files from some kind of webserver. Thanks for your help!

Marcos Mitozo · Accepted Answer · 2020-06-30 18:44:51Z

0

In my case, inserting "http://" before "localhost" worked!

onSubmit = event => {
    event.preventDefault();
    fetch('http://localhost:3000/register', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        email: this.state.email,
        password: this.state.password
      })
    });
  };

answered Jun 30, 2020 at 18:44

Marcos Mitozo

4815 silver badges4 bronze badges

Collectives™ on Stack Overflow

Unhandled Rejection (TypeError): Failed to fetch (POST) react / node / express

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related