javascript - React net::ERR_CONNECTION_REFUSED when making a sign up page

Question

It has been 11 hours since I have been on it and It is extremely frustrating to face the same error over and over.

I have built a full stack react app that has sign in, sign up, log out, my page on it. The issue occurs when I press Sign-Up, here is the error that shows on the console.

I have attached the Sign-up part of the code and I will add any code that might help you to understand better. Can someone please at least tell me if the issue is on the client side or the server side? ... thank you

here is the error on the console

signUp.js

import React from "react";
import { withRouter, Link } from "react-router-dom";
import axios from "axios";

axios.defaults.withCredentials = true;
class Signup extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      email: "",
      password: "",
      username: "",
      mobile: "",
      errorMessage: "",
    };
    this.handleInputValue = this.handleInputValue.bind(this);
    this.handleSignup = this.handleSignup.bind(this);
  }

  handleInputValue = (key) => (e) => {
    this.setState({ [key]: e.target.value });
  };

  handleSignup = () => {
    
    //        this.props.history.push("/");
    //

    if (!this.state.username || !this.state.email || !this.state.password || !this.state.mobile) {
      this.setState({errorMessage : 'fill requirements '})
    } else {
      axios.post('https://localhost:4000/signup', {
        username: this.state.username,
        email: this.state.email,
        password: this.state.password,
        mobile: this.state.mobile
      }, { 'Content-Type': 'application/json' }
      ) 
      .then(() => {this.props.history.push('/')})
      .catch((err) => console.log(err))
    }
  }

  render() {
    const {errorMessage} = this.state;
    return (
      <div>
        <center>
          <h1>Sign Up</h1>
          <form onSubmit={(e) => e.preventDefault()}>
            <div>fill required</div>
            <div>
              <span>email</span>
              <input
                type="email"
                onChange={this.handleInputValue("email")}
              ></input>
            </div>
            <div>
              <span>password</span>
              <input
                type="password"
                onChange={this.handleInputValue("password")}
              ></input>
            </div>
            <div>
              <span>name</span>
              <input
                type='text'
                onChange={this.handleInputValue("username")}
              ></input>
            </div>
            <div>
              <span>mobile</span>
              <input
                type='tel'
                onChange={this.handleInputValue("mobile")}
              ></input>
            </div>
            <div>
              <Link to='/login'>have an id?</Link>
            </div>
            <button
              className="btn btn-signup"
              type='submit'
              onClick={this.handleSignup}
            >
              sign up
            </button>
             <div className="alert-box">{errorMessage}</div>
          </form>
        </center>
      </div>
    );
  }
}

export default withRouter(Signup);

question from:https://stackoverflow.com/questions/65894785/react-neterr-connection-refused-when-making-a-sign-up-page

Answer 1

Waitting for answers