title: Axios post request is returning 401 unauthorised error
body: <p>I am developing a login screen. I'm using axios to call api. Axios post request is returning 401 error when used. But the same code works fine when I hard code the data to be sent. It does not read the json format data stored in the form.<br>
  What can I do?</p>
  
  <pre><code>class Login extends React.Component {
        handleSubmit = e =&gt; {
          e.preventDefault();
          this.props.form.validateFields((err, values) =&gt; {
            if (!err) {
              let cred= JSON.stringify(values);
              console.log('json values of form: ',cred );
              axios.post('http://10.42.0.108:8000/user/login/',cred)
              .then(function (response) {
                console.log(response);
              });
              // .catch(function (error) {
              //   console.log(error);
              // });
            }
          });
        };
  
        render() {
          const { getFieldDecorator } = this.props.form;
          return (
              &lt;React.Fragment&gt;
                &lt;div className='login'&gt;
      &lt;div className="login-container shadow-lg p-3 mb-5 ml-3 bg-white rounded"&gt;               
          &lt;Form onSubmit={this.handleSubmit} className="login-form px-5 py-5"&gt;
              &lt;div className="text-center"&gt;
                      &lt;h3 className="dark-grey-text mb-5"&gt;
                        &lt;strong&gt;Sign in&lt;/strong&gt;
                      &lt;/h3&gt;
              &lt;/div&gt;
              &lt;Form.Item&gt;
                {getFieldDecorator('outlook_id', {
                  rules: [{ required: true, message: 'Please input your username!' }],
                })(
                  &lt;Input
                    prefix={&lt;Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} /&gt;}
                    placeholder="Username" style={{width:'300px'}}
                  /&gt;,
                )}
              &lt;/Form.Item&gt;
              &lt;Form.Item&gt;
                {getFieldDecorator('password', {
                  rules: [{ required: true, message: 'Please input your Password!' }],
                })(
                  &lt;Input
                    prefix={&lt;Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} /&gt;}
                    type="password"
                    placeholder="Password" style={{width:'300px'}}
                  /&gt;,
                )}
              &lt;/Form.Item&gt;
              &lt;Form.Item&gt;
                {/* {getFieldDecorator('remember', {
                  valuePropName: 'checked',
                  initialValue: true,
                })(&lt;Checkbox&gt;Remember me&lt;/Checkbox&gt;)} */}
  
                &lt;Button type="primary" htmlType="submit" className="login-form-button"&gt;
                  Log in
                &lt;/Button&gt;
              &lt;/Form.Item&gt;
            &lt;/Form&gt;
        &lt;/div&gt;
           &lt;/div&gt;
           &lt;/React.Fragment&gt;    
          );
        }
      }
  
  const WrappedLogin = Form.create({ name: 'normal_login' })(Login);
  export default WrappedLogin;
  </code></pre>
  
  <p>I tried changing the variable and everything. it always returns the same error. Im new to this. please help.This is the error.</p>
  
  <pre><code>POST http://10.42.0.108:8000/user/login/ 401 (Unauthorized)
  Uncaught (in promise) Error: Request failed with status code 401
      at createError (createError.js:17)
      at settle (settle.js:19)
      at XMLHttpRequest.handleLoad (xhr.js:60)
  </code></pre>