title: Unhandled Rejection (TypeError): Failed to fetch , REST with Node.js
body: <p>I try to make a Request using React Js and my Node.js REST api deployed on Heroku. And i am getting this Error <code>Unhandled Rejection (TypeError): Failed to fetch</code>. For some Reason i dont understand why this is so.</p>
  <p>My code is looking like this</p>
  <pre><code>import './Home.css'
  import React, { useState } from 'react';
  import { Link , useHistory } from 'react-router-dom';
  
  const MyLogin = () =&gt;{
      const[username, setUsername] = useState('');
      const[password, setPassword] = useState('');
      const history = useHistory();
  
      function login(){
          let item = {username , password};
          fetch('https://instagramklone-restapi.herokuapp.com/api/login',{
              method : 'POST',
              mode : 'cors',
              headers:{
                  'Accept': 'application/json',
                  'Content-Type': 'application/json',
              },
              body: JSON.stringify(item)
          }).then((response) =&gt; response.json())
          .then((responseJson) =&gt;{
              if(responseJson.message === 'OK'){
                  localStorage.setItem('userinfo', username);
                  history.push('/dashboard');
              }else{
                  alert(responseJson);
              }
          });
      }
  
      return (
          &lt;div align=&quot;center&quot;&gt;
              &lt;table width=&quot;61%&quot; border=&quot;0&quot;&gt;
              &lt;div className=&quot;instagramlogo&quot;&gt;
                  &lt;img src=&quot;images/43cc71bb1b43_2-removebg-preview.png&quot;/&gt;
              &lt;/div&gt;
              &lt;div className=&quot;login_page&quot;&gt;
                  &lt;img border=&quot;0&quot; align=&quot;center&quot; src=&quot;images/images-removebg-preview.png&quot; width=&quot;168&quot; height=&quot;70&quot; className=&quot;InstagramLogo&quot; /&gt;
                  &lt;div className=&quot;usernameLogin&quot;&gt;
                      &lt;p align=&quot;center&quot;&gt;&lt;input type=&quot;text&quot; name=&quot;T1&quot; placeholder=&quot;  Phone number, username or email&quot; size=&quot;33&quot; onChange ={(e) =&gt;setUsername(e.target.value)} className=&quot;inputBox&quot; /&gt;&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;usernameLogin&quot;&gt;
                      &lt;p align=&quot;center&quot;&gt;&lt;input type=&quot;password&quot; name=&quot;T1&quot; placeholder=&quot;  Password&quot; size=&quot;33&quot; onChange ={(e) =&gt;setPassword(e.target.value)} className=&quot;inputBox&quot; /&gt;&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;usernameLogin&quot;&gt;
                      &lt;p align=&quot;center&quot;&gt;&lt;input onClick={login} type=&quot;submit&quot; value=&quot;Login&quot; name=&quot;B1&quot; class=&quot;BtnLoginClass&quot;/&gt;&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;forgotPassword&quot;&gt;
                      &lt;p align=&quot;center&quot;&gt;&lt;Link to=&quot;#&quot;&gt;Forgot Password?&lt;/Link&gt;&lt;font face=&quot;Arial&quot;/&gt;&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
                  &lt;div className=&quot;No_account&quot;&gt;
                  &lt;p align=&quot;center&quot;&gt;&lt;font face=&quot;Arial&quot;/&gt;No Account? &lt;Link to=&quot;/register&quot;&gt;Register!&lt;/Link&gt;&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;get_app&quot;&gt;
                      &lt;p align=&quot;center&quot;&gt;&lt;font face=&quot;Arial&quot;/&gt; Get The app&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;PlayStoreAppStoreArea&quot;&gt;
                      &lt;td width=&quot;204&quot;&gt;
                      &lt;p align=&quot;center&quot;&gt;
                      &amp;nbsp;&lt;input type=&quot;image&quot; src=&quot;images/appstore.png&quot; width=&quot;169&quot; height=&quot;51&quot; align=&quot;right&quot;/&gt;
                      &lt;/p&gt;
                      &lt;/td&gt;
                      &lt;td width=&quot;204&quot;&gt;
                      &lt;p align=&quot;center&quot;&gt;
                      &amp;nbsp;&lt;input type=&quot;image&quot; src=&quot;images/googlePlay.png&quot; width=&quot;169&quot; height=&quot;51&quot; align=&quot;left&quot;/&gt;
                      &lt;/p&gt;
                      &lt;/td&gt;
                  &lt;/div&gt;
              &lt;/table&gt;
          &lt;/div&gt;
      );
  };
  
  export default MyLogin;
  </code></pre>
  <p>The Error is looking like this</p>
  <p><a href="https://postimg.cc/yg863fGM" rel="nofollow noreferrer">![9090.png]Error(https://i.postimg.cc/85h739mz/9090.png)</a></p>
  <p>Its supposed to authenticate as json and then sign in and navigate to the dashboard , but i am getting an error. Pls help.</p>
  <p><strong>Edits</strong>
  I get this Error</p>
  <pre><code>Access to fetch at 'https://instagramklone-restapi.herokuapp.com/api/login' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
  </code></pre>