title: Axios when posting to api there isn't a response returned, but the error handling works if there is an error in the URL
body: <p>I am posting to my API and where it should return a response nothing is logged to the console.</p>
  <p>I have the following code:</p>
  <pre><code>import React, {useState} from &quot;react&quot;
  import axios from 'axios';
  
  const conn = axios.create({
    baseURL: 'https://myurl.com',
    headers: {
      'Content-Type': 'application/json'
    }
  });
  
  const Login = () =&gt; {
    const [un,setUn] = useState('');
    const [pw,setPw] = useState('');
  
    const pleaseLogin = (un, pw) =&gt; {
  
        //Hard coding the values for now
        const email = &quot;me@mydomain.org&quot;;
        const pass = &quot;weakpassword&quot;;
  
        conn.post('/apilogin/authenticate/',
          {
            email: email, password: pass
          })
        .then(res =&gt; {
          console.log(&quot;This is never reached&quot;);
          console.log(res);
          console.log(res.data);
        }, (error) =&gt; {
          console.log(&quot;This is reached if I alter the URL&quot;);
          console.log(error);
        });
    }
  
    return (
      &lt;form onSubmit={() =&gt; pleaseLogin(un,pw)}&gt;
        &lt;label&gt;
          User Name:
          &lt;input type=&quot;text&quot; value={un} onChange={setUn} /&gt;
        &lt;/label&gt;
        &lt;label&gt;
          Password:
          &lt;input type=&quot;text&quot; value={pw} onChange={setPw} /&gt;
        &lt;/label&gt;
        &lt;input type=&quot;submit&quot; value=&quot;Submit&quot; /&gt;
      &lt;/form&gt;
    );
  };
  
  export default Login
  </code></pre>
  <p>If I change the URL then I get a 404 error so the error handling is working, but no response is logged at all if the URL is correct. If I run this call to the API through postman, then it works fine and I get a JSON response like below:</p>
  <pre><code>{
      &quot;refresh&quot;: &quot;tokendata&quot;,
      &quot;access&quot;: &quot;tokendata&quot;
  }
  </code></pre>
  <p>When trying using fetch, I was seeing CORS errors when logging the response, but since adding the cors setting it stopped, but I am still not seeing a response. There is no error on the server I can see, I just see 200OK when the request is processed.</p>
  <p>This is using the Fetch method:</p>
  <pre><code>const pleaseLogin = async (un, pw) =&gt; {
  
    const data = { email: un, password: pw };
  
    fetch(`${baseUrl}/apilogin/authenticate/`, {
      method: 'POST', // or 'PUT'
      headers: {
        'Content-Type': 'application/json',
      },
      mode: 'cors',
      body: JSON.stringify(data),
    })
    .then(response =&gt; {console.log(response)});
  }
  </code></pre>
  <p>I have tried running react from http://localhost:3000 and from http://myipaddress:3000 as well and that hasn't made a difference.</p>
  <p>Server logs:</p>
  <pre><code>   2020-12-03T10:04:37.365435+00:00 heroku[router]: at=info method=POST path=&quot;/apilogin/authenticate/&quot; host=OMITTED fwd=&quot;myexternalipaddress&quot; dyno=web.1 connect=0ms service=200ms status=200 bytes=761 protocol=https
  2020-12-03T10:04:37.363496+00:00 app[web.1]: omitted - - [03/Dec/2020:10:04:37 +0000] &quot;POST /apilogin/authenticate/ HTTP/1.1&quot; 200 438 &quot;http://localhost:3000/&quot; &quot;Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36&quot;
  </code></pre>
  <p>UPDATE: modified headers below.</p>
  <pre><code>headers: {
    'Content-Type': 'application/json',
    'Sec-Fetch-Site': 'cross-site',
  },
  </code></pre>
  <p>UPDATE: I have tried running the react app on a development server where the API backend runs. The django application is set up to handle CORS. I have tried with Firefox and the server receives a request like below:</p>
  <pre><code>OPTIONS /api/authenticate/ HTTP/1.1&quot; 200 0
  </code></pre>
  <p>If I run the app in Chrome then it gets nothing at all. I understand that this is a pre-flight request. As far as I can tell, the server is set up to handle this. I'm not sure where to go from here. I know that other frameworks work with the same request. I have tested with static HTML as below and this works.</p>
  <pre><code>&lt;script&gt;
  
  
  const login = async () =&gt; {
  
    const email = &quot;emailaddress&quot;;
    const pass = &quot;password&quot;;
  
    try {
      const response = await axios({
        'Content-Type' : 'application/json',
        url: 'http://127.0.0.1:8000/api/authenticate/',
        method: 'post',
        data: { email: email, password: pass },
      }).then( response =&gt; {
        console.log(response);
      });
    } catch (e) {
      console.log(e);
    }
  }
  
  login();
  
  &lt;/script&gt;
  </code></pre>