title: Authentication login error: "Unhandled Rejection (TypeError): Failed to fetch"
body: <p>I am learning on how to set up the authenticaton on my web-app. I have finished my back end encryption and connection to my database and currently I'm building my register component in the front end.
  I working with MERN stack, and **I have tested all my routes with Postman, and worked successfully. ** The new users were posted to my database.</p>
  <p>Do you know what triggers this error in my login form and what I can I do to sort it out?</p>
  <p>Thanks in advance.</p>
  <p>[<img src="https://i.stack.imgur.com/s6Gnq.png" alt="Error when trying to register my users from my frontend1" /></p>
  <p>Register.js in client side.</p>
  <pre><code>import React, {useState} from 'react'
  
  // The form passes tis value to a the state, which will  then be posted when clicking Submit in the form which triggers registerUser()
  
   function Register() {
     const[user, setUser] = useState({
       userName:&quot;&quot;,
       email:&quot;&quot;,
       password:&quot;&quot;,
       profilePicture:&quot;&quot;,
     });
  
  
    async function registerUser(event) {
      /* prevent the default behaviour caused by the event itself.
       Keep it from attempting to refresh the browser as the browser
      tries to submit the form to some back end server that doesn't exist */
  
      event.preventDefault()
         await fetch('http://localhost:5000/members/add', {
          method: 'POST',
          headers:{
            'Content-Type':'application/json;',  
          },
          body: JSON.stringify({
            userName: user.userName,
            email: user.email, 
            password: user.password,
            profilePicture: user.profilePicture,
          })
        }).then(data =&gt; data.json())
     }
  
    return(
      &lt;div&gt;
      &lt;div className=&quot;login-wrapper&quot;&gt;
        &lt;h1&gt;Register&lt;/h1&gt;
        &lt;p&gt;Welcome to our app, please register.&lt;/p&gt;
        &lt;form onSubmit={e=&gt; registerUser(e)}&gt;
          &lt;label&gt;
            &lt;p&gt;Username&lt;/p&gt;
            &lt;input type=&quot;text&quot; onChange={e =&gt; setUser((x)=&gt;({ ...x, userName:e.target.value,}))} /&gt;
          &lt;/label&gt;&lt; br/&gt;
          &lt;label&gt;
            &lt;p&gt;Profile Picture&lt;/p&gt;
            &lt;input type=&quot;text&quot; onChange={e =&gt; setUser((x)=&gt;({ ...x, profilePicture:e.target.value,}))} /&gt;
          &lt;/label&gt;&lt; br/&gt;
          &lt;label&gt;
            &lt;p&gt;Email&lt;/p&gt;
            &lt;input type=&quot;email&quot; onChange={e =&gt; setUser((x)=&gt;({ ...x, email:e.target.value,}))}  /&gt;
          &lt;/label&gt;&lt; br/&gt;
          &lt;label&gt;
            &lt;p&gt;Password&lt;/p&gt;
            &lt;input type=&quot;password&quot; onChange={e =&gt; setUser((x)=&gt;({ ...x, password:e.target.value,}))}  /&gt;
          &lt;/label&gt;&lt; br/&gt;
          &lt;div&gt;
            &lt;button type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/div&gt;
      &lt;/div&gt;  
    )
  }
  
  export {Register}
  </code></pre>
  <p>I've followed Ben suggestion and looked at networking tab in devtools and found this error:</p>
  <pre><code>Access to fetch at 'http://localhost:5000/members/add' 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.
  </code></pre>