title: ReactJS + Axios "Uncaught (in promise) Error: Network Error" | "Uncaught TypeError: response.data is undefined"
body: <p>newbie here :)</p>
  <p>I am trying to learn about JWT Authentication following a tutorial with Django back end and React. <a href="https://hackernoon.com/110percent-complete-jwt-authentication-with-django-and-react-2020-iejq34ta" rel="nofollow noreferrer">https://hackernoon.com/110percent-complete-jwt-authentication-with-django-and-react-2020-iejq34ta</a> .</p>
  <p>I solve many unexpected errors on this tutorial before with online searching, but now i can't find a solution.</p>
  <p>I am on first steps to use Axios for requests and tokens, from tutorial :</p>
  <p>&quot; <em>We want to use Axios for: POSTing to /api/user/create/ to create a userPOSTing to /api/token/obtain/ to login a user and obtain a JWT token pairPOSTing to /api/token/refresh/ to refresh the JWT token pairGETting from the protected /api/hello/ to see what the backend secretly has to say</em> &quot;</p>
  <p>The expected behavior based on the tutorial is on (Image 1) :</p>
  <p><a href="https://i.stack.imgur.com/k8zFd.png" rel="nofollow noreferrer">The expected behavior : Image 1</a></p>
  <p>But after <code>npm run build</code> command <code>python manage.py runserver</code> command, i am trying to Log In in the system and i got this error on firefox console (Image 2)</p>
  <p><a href="https://i.stack.imgur.com/7qzon.png" rel="nofollow noreferrer">Error on firefox console : Image 2</a></p>
  <p>Also, on Django console i got <code>&quot;OPTIONS /api/token/obtain/ HTTP/1.1&quot; 200 372 </code> instead of <code>&quot;POST /api/token/obtain/ HTTP/1.1&quot; 200 491</code>.</p>
  <p>The files i used for this section of tutorial is :</p>
  <pre><code>// djsr/frontend/src/axiosApi.js
  
  import axios from 'axios'
  
  const axiosInstance = axios.create({
      baseURL: 'http://127.0.0.1:8000/api/',
      timeout: 5000,
      headers: {
          'Access-Control-Allow-Origin': '*'
          'Authorization': &quot;JWT &quot; + localStorage.getItem('access_token'),
          'Content-Type': 'application/json',
          'accept': 'application/json'
      }
  });
  
  export default axiosInstance;
  </code></pre>
  <p><em><em>Note</em> : I found online that I should put <code>'Access-Control-Allow-Origin': '*'</code> on headers in <code>djsr/frontend/src/axiosApi.js</code> but nothing happens with this.</em></p>
  <p>and the :</p>
  <pre><code>// djsr/frontend/src/components/login.js
  
      import React, { Component } from &quot;react&quot;;
      import axiosInstance from &quot;../axiosApi&quot;;
      
      class Login extends Component {
          constructor(props) {
              super(props);
              this.state = {username: &quot;&quot;, password: &quot;&quot;};
      
              this.handleChange = this.handleChange.bind(this);
              this.handleSubmit = this.handleSubmit.bind(this);
          }
      
          handleChange(event) {
              this.setState({[event.target.name]: event.target.value});
          }
      
          handleSubmit(event) {
              event.preventDefault();
              try {
                  
                  const response = axiosInstance.post('/token/obtain/', {
                      username: this.state.username,
                      password: this.state.password
                  });
                  axiosInstance.defaults.headers['Authorization'] = &quot;JWT &quot; + response.data.access;
                  localStorage.setItem('access_token', response.data.access);
                  localStorage.setItem('refresh_token', response.data.refresh);
                  return data;
              } catch (error) {
                  throw error;
              }
          }
      
          render() {
              return (
                  &lt;div&gt;
                      Login
                      &lt;form onSubmit={this.handleSubmit}&gt;
                          &lt;label&gt;
                              Username:
                              &lt;input name=&quot;username&quot; type=&quot;text&quot; value={this.state.username} onChange={this.handleChange}/&gt;
                          &lt;/label&gt;
                          &lt;label&gt;
                              Password:
                              &lt;input name=&quot;password&quot; type=&quot;password&quot; value={this.state.password} onChange={this.handleChange}/&gt;
                          &lt;/label&gt;
                          &lt;input type=&quot;submit&quot; value=&quot;Submit&quot;/&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
              )
          }
      }
      export default Login;
  </code></pre>
  <p><em>P.S : I really hope for a solution, to finish this tutorial, to be happy :)
  Thank you all for your time and for help!!</em></p>