title: Error: Request failed with status code 401 axios in React JS
body: <p>I am creating a login page using Laravel API and ReactJS front end. I am using <a href="https://www.npmjs.com/package/axios" rel="noreferrer">Axios</a> in ReactJS to parse the <code>username(email)</code> and <code>password</code>. The API for login is <code>http://127.0.0.1:8000/api/login</code> which works correctly in postman <code>form-data</code>. But when I entered the <code>email</code> and the <code>password</code> in react front-end the echos is <code>Error: Request failed with status code 401.</code> This error throws by the catch function of axios. I am also using <a href="https://www.npmjs.com/package/querystring" rel="noreferrer">querystring</a> npm also. So which throws this error?</p>
  
  <p><strong>My React JS code</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import { Button, Card, CardBody, CardGroup, Col, Container, Input, InputGroup, InputGroupAddon, InputGroupText, Row } from 'reactstrap';
  import axios from 'axios';
  import  { Redirect } from 'react-router-dom'
  import querystring from 'querystring';
  
  
  class Login extends Component
  {
    constructor(props)
    {
      super(props);
      this.onClick = this.onClick.bind(this);
  
      this.state = {
        email:"",
        password:""
      }
    }
  
    onClick(event)
    {
      var self = this;
      var payload={
        "email":this.state.email,
        "password":this.state.password,
      }
      //axios.post('http://127.0.0.1:8000/api/login', payload) .then((response) =&gt; {}
      console.log("1. Hello before axios.post");
      //axios.post('http://127.0.0.1:8000/api/login', payload)
      axios.post('http://127.0.0.1:8000/api/login', querystring.stringify({payload}))
  
      .then((response) =&gt;
      {
        console.log("2. Inside axios response");
        console.log(response);
        if(response.data.code == 200)
        {
          //Set localstorage:
          const userDetails = {userName: this.state.email}
          localStorage.setItem('userDetails', JSON.stringify(userDetails));
  
          console.log("Login successfull");
          return &lt;Redirect to='/Master'  /&gt;
  
        }
  
        else if(response.data.code == 204)
        {
          console.log("Username password do not match");
          alert(response.data.success)
        }
  
        else if(response.data.code == 401)
        {
          alert(response.data.success)
        }
  
        else
        {
          console.log("Username does not exists");
          alert("Username does not exist");
        }
      })
  
      .catch(function (error)
      {
        console.log("The error is : " + error);
      });
  }
    render()
    {
      return (
        &lt;div className="app flex-row align-items-center"&gt;
          &lt;Container&gt;
            &lt;Row className="justify-content-center"&gt;
              &lt;Col md="8"&gt;
                &lt;CardGroup&gt;
                  &lt;Card className="p-4"&gt;
                    &lt;CardBody&gt;
                      &lt;h1&gt;Login&lt;/h1&gt;
                      &lt;p className="text-muted"&gt;Sign In to your account&lt;/p&gt;
                      &lt;InputGroup className="mb-3"&gt;
                        &lt;InputGroupAddon addonType="prepend"&gt;
                          &lt;InputGroupText&gt;
                            &lt;i className="icon-user" /&gt;
                          &lt;/InputGroupText&gt;
                        &lt;/InputGroupAddon&gt;
                        &lt;Input type="text" placeholder="Username" /&gt;
                      &lt;/InputGroup&gt;
                      &lt;InputGroup className="mb-4"&gt;
                        &lt;InputGroupAddon addonType="prepend"&gt;
                          &lt;InputGroupText&gt;
                            &lt;i className="icon-lock" /&gt;
                          &lt;/InputGroupText&gt;
                        &lt;/InputGroupAddon&gt;
                        &lt;Input type="password" placeholder="Password" /&gt;
                      &lt;/InputGroup&gt;
                      &lt;Row&gt;
                        &lt;Col xs="6"&gt;
                          &lt;Button color="primary" className="px-4" onClick={this.onClick}&gt;
                            Login
                          &lt;/Button&gt;
                        &lt;/Col&gt;
                        &lt;Col xs="6" className="text-right"&gt;
                          &lt;Button color="link" className="px-0"&gt;
                            Forgot password?
                          &lt;/Button&gt;
                        &lt;/Col&gt;
                      &lt;/Row&gt;
                    &lt;/CardBody&gt;
                  &lt;/Card&gt;
                  &lt;Card
                    className="text-white bg-primary py-5 d-md-down-none"
                    style={{ width: 44 + "%" }}
                  &gt;
                    &lt;CardBody className="text-center"&gt;
                      &lt;div&gt;
                        &lt;h2&gt;Sign up&lt;/h2&gt;
                        &lt;p&gt;
                          Are you a new user to the Restaurant system? Hooray now , you can create an account...
                        &lt;/p&gt;
                        &lt;Button color="primary" className="mt-3" active&gt;
                          Register Now!
                        &lt;/Button&gt;
                      &lt;/div&gt;
                    &lt;/CardBody&gt;
                  &lt;/Card&gt;
                &lt;/CardGroup&gt;
              &lt;/Col&gt;
            &lt;/Row&gt;
          &lt;/Container&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default Login;
  </code></pre>
  
  <p>The following is the Laravel API login code which requires the <code>email</code> and <code>password</code></p>
  
  <p><strong>Laravel login API code</strong></p>
  
  <pre><code>&lt;?php
  namespace App\Http\Controllers\API;
  use Illuminate\Http\Request; 
  use App\Http\Controllers\Controller; 
  use App\User; 
  use Illuminate\Support\Facades\Auth; 
  use Validator;
  class UserController extends Controller 
  {
      public $successStatus = 200;
  
      public function login()
      { 
          if(Auth::attempt(['email' =&gt; request('email'), 'password' =&gt; request('password')]))
          {
              $user = Auth::user(); 
              $success['token'] =  $user-&gt;createToken('MyApp')-&gt; accessToken; 
              return response()-&gt;json(['success' =&gt; $success], $this-&gt; successStatus);
          } 
  
          else
          { 
              return response()-&gt;json(['error'=&gt;'Unauthorized'], 401); 
          } 
      }
  }
  </code></pre>
  
  <p><strong>Update</strong></p>
  
  <p>As <a href="https://github.com/alsofronie" rel="noreferrer">Alex</a> says <a href="https://github.com/axios/axios/issues/960#issuecomment-309287911" rel="noreferrer">here</a> I changed <code>console.log("The error is : " + error);
  </code> as <code>console.log("The error is : " + error.response);</code> in <code>catch</code> function. It echos <code>The error is : [object Object]</code>.</p>