title: fetch POST and getting "400 (Bad Request)" in React client - Nodejs backend
body: <p>I am trying to add a new user with a registration form but when I fetch it with the post method to add to the database on MongoDB, I get the response on the screen as you see.</p>
  <p>I can see data on the console after filling the registration form, I do that with console button.</p>
  <p>Also, I can register a new user on Postman without any problem.</p>
  <p><a href="https://i.stack.imgur.com/Wy71P.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Wy71P.png" alt="my screen" /></a></p>
  <p><a href="https://i.stack.imgur.com/I7kCu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/I7kCu.png" alt="My Postman successful post request" /></a></p>
  <p>My code is here:</p>
  <pre><code>import { useState} from &quot;react&quot;;
  import { FaUser } from &quot;react-icons/fa&quot;;
  import { useNavigate } from &quot;react-router-dom&quot;;
  
  
  function Register() {
    
      const [formData, setFormData] = useState({
          name: &quot;&quot;,
          email: &quot;&quot;,
          password: &quot;&quot;,
          password2: &quot;&quot;,
      });
      const { name, email, password, password2 } = formData;
  
      const navigate=useNavigate();
  
      const onChange = (e) =&gt; {
          setFormData({ ...formData, [e.target.name]: e.target.value });
          // console.log(formData);
      }
      const showData=(e)=&gt;{
          e.preventDefault();
          console.log(formData);
      }
  
      const onSubmit = (e) =&gt; {
          e.preventDefault();
          if(password!==password2){
             alert(&quot;Password does not match&quot;);
          }else{
              fetch(&quot;http://localhost:5000/api/users&quot;,{   
                  mode: 'no-cors',
                  method:&quot;POST&quot;,
                  headers:{
                      &quot;Content-Type&quot;:&quot;application/json&quot;
                  },
                  body:JSON.stringify({
                      name,
                      email,
                      password
                  })
              })
              .then(res=&gt;res.json())
              .then(data=&gt;{
                  if(data.error){
                      console.log(data.error);
                  }else{
                      navigate(&quot;/login&quot;);
                  }
              })
              
          }
      }
  
     
  
      return (
      &lt;&gt;
  
          &lt;section className=&quot;heading&quot;&gt;
              &lt;h1&gt;
                  &lt;FaUser /&gt; Register
              &lt;/h1&gt;
              &lt;p&gt;Please create an account&lt;/p&gt;
          &lt;/section&gt;
          &lt;section className=&quot;form&quot;&gt;
              &lt;form onSubmit={onSubmit}&gt;
                  &lt;div className=&quot;form-group&quot;&gt;
                      &lt;input type=&quot;text&quot; className=&quot;form-control&quot; id=&quot;name&quot;
                          name=&quot;name&quot; value={name} placeholder=&quot;Enter your name&quot;
                          onChange={onChange} /&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;form-group&quot;&gt;
                      &lt;input type=&quot;text&quot; className=&quot;form-control&quot; id=&quot;email&quot;
                          name=&quot;email&quot; value={email} placeholder=&quot;Enter your email&quot;
                          onChange={onChange} /&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;form-group&quot;&gt;
                      &lt;input type=&quot;text&quot; className=&quot;form-control&quot; id=&quot;password&quot;
                          name=&quot;password&quot; value={password} placeholder=&quot;Enter your password&quot;
                          onChange={onChange} /&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;form-group&quot;&gt;
                      &lt;input type=&quot;text&quot; className=&quot;form-control&quot; id=&quot;password2&quot;
                          name=&quot;password2&quot; value={password2} placeholder=&quot;Confirm your password2&quot;
                          onChange={onChange} /&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;form-group&quot;&gt;
                      &lt;button type=&quot;submit&quot; className=&quot;btn btn-block&quot;&gt;Submit&lt;/button&gt;
                      &lt;button onClick={showData} className=&quot;btn btn-block&quot;&gt;Console&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          &lt;/section&gt;
      &lt;/&gt;
      )
  }
  
  export default Register
  </code></pre>