title: Error occured while trying to proxy to: localhost:3000/api/register in register form
body: <p>I am trying to create a register form using React on the frontend, and Express with MongoDB atlas on the backend using typescript everywhere. When I click the submit button, nothing happens, but when I post the request using Postman application I get the following output after a long delay:</p>
  
  <pre><code>"Error occured while trying to proxy to: localhost:3000/api/register?email=test123@gmail.com&amp;password=test123"
  </code></pre>
  
  <p>And I get an empty record in my database, something like that:</p>
  
  <pre><code>_id: Object("5d7679d8fa74d54ebb0534b9")
  __v: 0
  </code></pre>
  
  <p>Also after long delay i see this error in terminal in vscode:</p>
  
  <pre><code>[HPM] Error occurred while trying to proxy request /api/register?email=test123@gmail.com&amp;password=test123 from localhost:3000 to http://localhost:5000/ (ECONNRESET) (https://nodejs.org/api/errors.html#errors_common_system_errors)
  </code></pre>
  
  <p>I created React frontend using "create-react-app", and already did the following instructions in post: <a href="https://stackoverflow.com/questions/52605997/when-specified-proxy-in-package-json-must-be-a-string">When specified, &quot;proxy&quot; in package.json must be a string</a> . </p>
  
  <p>The thing is that I also have a contact form that is working and a proxy is working there, and I get the email when clicking submit in a contact form.</p>
  
  <p>I show my package.json in my main folder (which I use to run my frontend and backend concurrently) in which I have two folders: backend (in which I have dist folder to which I transpile my .ts files to .js), and frontend folder.</p>
  
  <pre><code>{
    "name": "ecommerce-template-mern",
    "version": "1.0.0",
    "main": "main.js",
    "license": "MIT",
    "scripts": {
      "build": "tsc -p backend/.",
      "backend": "nodemon backend/dist/main.js",
      "frontend": "cd frontend &amp;&amp; npm run start",
      "dev": "concurrently --kill-others-on-fail \"npm run backend\" \"npm run frontend\""
    },
    "devDependencies": {
      "concurrently": "^4.1.2",
      "nodemon": "^1.19.2",
      "tsc-watch": "^3.0.0"
    },
    "dependencies": {
      "body-parser": "^1.19.0",
      "express": "^4.17.1",
      "http-proxy-middleware": "^0.20.0",
      "nodemailer": "^6.3.0",
      "typescript": "^3.6.2"
    }
  }
  </code></pre>
  
  <p>And package.json in frontend folder in which I have a proxy.</p>
  
  <pre><code>{
    "name": "frontend",
    "version": "0.1.0",
    "private": true,
    "proxy": "http://localhost:5000",
    "dependencies": {
      "@material-ui/core": "^4.4.0",
      "@material-ui/icons": "^4.2.1",
      "@types/jest": "24.0.18",
      "@types/node": "^12.7.2",
      "@types/react": "^16.9.2",
      "@types/react-dom": "^16.9.0",
      "axios": "^0.19.0",
      "formik": "^1.5.8",
      "http-proxy-middleware": "^0.20.0",
      "react": "^16.9.0",
      "react-dom": "^16.9.0",
      "react-router-dom": "^5.0.1",
      "react-scripts": "3.1.1",
      "styled-components": "^4.3.2",
      "typescript": "3.5.3",
      "yup": "^0.27.0"
    },
    "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test",
      "eject": "react-scripts eject"
    },
    "eslintConfig": {
      "extends": "react-app"
    },
    "browserslist": {
      "production": [
        "&gt;0.2%",
        "not dead",
        "not op_mini all"
      ],
      "development": [
        "last 1 chrome version",
        "last 1 firefox version",
        "last 1 safari version"
      ]
    },
    "devDependencies": {
      "@types/enzyme": "^3.10.3",
      "@types/react-router": "^5.0.3",
      "@types/react-router-dom": "^4.3.5",
      "@types/reactstrap": "^8.0.4",
      "@types/styled-components": "^4.1.18",
      "@types/yup": "^0.26.23",
      "bootstrap": "^4.3.1",
      "enzyme": "^3.10.0",
      "nodemon": "^1.19.1",
      "react-addons-test-utils": "^15.6.2",
      "react-bootstrap": "^1.0.0-beta.12",
      "reactstrap": "^8.0.1",
      "ts-node": "^8.3.0",
      "ts-node-dev": "^1.0.0-pre.42"
    }
  }
  </code></pre>
  
  <p>Below is my code that should put data in my MongoDB atlas: </p>
  
  <pre><code>import express, { Application, Request, Response } from "express";
  import bodyParser from "body-parser";
  import * as dotenv from "dotenv";
  
  dotenv.config({ path: __dirname + "/../.env" });
  
  const app: Application = express();
  
  app.use(bodyParser.json());
  app.use(bodyParser.urlencoded({ extended: false }));
  
  const dbURI: any = process.env.MONGO_CONNECTION;
  
  mongoose
    .connect(dbURI, {
      useNewUrlParser: true
    })
    .then(() =&gt; console.log("MongoDB Connected"))
    .catch(err =&gt; console.log(err));
  
  const Schema = mongoose.Schema;
  const UserSchema = new Schema({ email: String, password: String });
  
  interface IUser extends mongoose.Document {
    email: string;
    password: string;
  }
  
  const User = mongoose.model&lt;IUser&gt;("User", UserSchema);
  
  app.post("/api/register", (req: Request, res: Response) =&gt; {
    const newUser = new User({
      email: req.body.email,
      password: req.body.password
    });
    newUser.save().then(() =&gt; console.log("New user in database!"));
  });
  
  const PORT = 5000
  
  app.listen(PORT, () =&gt; {
    console.log(`Server listening on port ${PORT}`);
  });
  </code></pre>
  
  <p>Above code outputs "New user in database!", but as I wrote on top of post I get an error, and "empty" object in a database.</p>
  
  <p>Also, another thing to note is that when I run this code below:</p>
  
  <pre><code>const newUser2 = new User({
    email: "test@gmail.com",
    password: "123"
  });
  newUser2.save().then(() =&gt; console.log("New user in database!"));
  </code></pre>
  
  <p>I get the desired data record in MongoDB.</p>
  
  <p>I also attach my register form in React below (almost same contact form works when sending mail, so I don't think there is problem with it):</p>
  
  <pre><code>import axios from "axios";
  import { Field, Form, FormikProps, withFormik } from "formik";
  import React from "react";
  import * as Yup from "yup";
  
  interface FormValues {
    email: string;
    password: string;
  }
  
  interface MyFormProps {
    initialEmail?: string;
    initialPassword?: string;
  }
  
  class RegisterForm extends React.PureComponent&lt;FormikProps&lt;FormValues&gt;&gt; {
    render() {
      const { values, touched, errors, isSubmitting } = this.props;
      return (
        &lt;Form&gt;
          &lt;Field
            type="email"
            name="email"
            placeholder="email"
            value={values.email}
          /&gt;
          {touched.email &amp;&amp; errors.email &amp;&amp; &lt;div&gt;{errors.email}&lt;/div&gt;}
          &lt;Field
            type="password"
            name="password"
            placeholder="password"
            value={values.password}
          /&gt;
          {touched.password &amp;&amp; errors.password &amp;&amp; &lt;div&gt;{errors.password}&lt;/div&gt;}
          &lt;button type="submit" disabled={isSubmitting}&gt;
            Submit
          &lt;/button&gt;
        &lt;/Form&gt;
      );
    }
  }
  
  const FormikRegisterForm = withFormik&lt;MyFormProps, FormValues&gt;({
    mapPropsToValues: props =&gt; {
      return {
        email: props.initialEmail || "",
        password: ""
      };
    },
    validationSchema: Yup.object().shape({
      login: Yup.string()
        .email("email is not valid")
        .required("email is required"),
      password: Yup.string().required("password is required")
    }),
    handleSubmit(values) {
      const { email, password } = values;
      axios
        .post("/api/register", {
          email,
          password
        })
        .then(res =&gt; {
          console.log(res);
        })
        .catch(err =&gt; {
          console.log(err);
        });
    }
  })(RegisterForm);
  
  export default FormikRegisterForm;
  </code></pre>
  
  <p>What can I change to get the desired result it database after clicking submit button in register form? Thanks for help in advance.</p>