Error: Request failed with status code 401 axios in React JS

Question

I am creating a login page using Laravel API and ReactJS front end. I am using Axios in ReactJS to parse the username(email) and password. The API for login is http://127.0.0.1:8000/api/login which works correctly in postman form-data. But when I entered the email and the password in react front-end the echos is Error: Request failed with status code 401. This error throws by the catch function of axios. I am also using querystring npm also. So which throws this error?

My React JS 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) => {}
    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) =>
    {
      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 <Redirect to='/Master'  />

      }

      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 (
      <div className="app flex-row align-items-center">
        <Container>
          <Row className="justify-content-center">
            <Col md="8">
              <CardGroup>
                <Card className="p-4">
                  <CardBody>
                    <h1>Login</h1>
                    <p className="text-muted">Sign In to your account</p>
                    <InputGroup className="mb-3">
                      <InputGroupAddon addonType="prepend">
                        <InputGroupText>
                          <i className="icon-user" />
                        </InputGroupText>
                      </InputGroupAddon>
                      <Input type="text" placeholder="Username" />
                    </InputGroup>
                    <InputGroup className="mb-4">
                      <InputGroupAddon addonType="prepend">
                        <InputGroupText>
                          <i className="icon-lock" />
                        </InputGroupText>
                      </InputGroupAddon>
                      <Input type="password" placeholder="Password" />
                    </InputGroup>
                    <Row>
                      <Col xs="6">
                        <Button color="primary" className="px-4" onClick={this.onClick}>
                          Login
                        </Button>
                      </Col>
                      <Col xs="6" className="text-right">
                        <Button color="link" className="px-0">
                          Forgot password?
                        </Button>
                      </Col>
                    </Row>
                  </CardBody>
                </Card>
                <Card
                  className="text-white bg-primary py-5 d-md-down-none"
                  style={{ width: 44 + "%" }}
                >
                  <CardBody className="text-center">
                    <div>
                      <h2>Sign up</h2>
                      <p>
                        Are you a new user to the Restaurant system? Hooray now , you can create an account...
                      </p>
                      <Button color="primary" className="mt-3" active>
                        Register Now!
                      </Button>
                    </div>
                  </CardBody>
                </Card>
              </CardGroup>
            </Col>
          </Row>
        </Container>
      </div>
    );
  }
}

export default Login;

The following is the Laravel API login code which requires the email and password

Laravel login API code

<?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' => request('email'), 'password' => request('password')]))
        {
            $user = Auth::user(); 
            $success['token'] =  $user->createToken('MyApp')-> accessToken; 
            return response()->json(['success' => $success], $this-> successStatus);
        } 

        else
        { 
            return response()->json(['error'=>'Unauthorized'], 401); 
        } 
    }
}

Update

As Alex says here I changed console.log("The error is : " + error); as console.log("The error is : " + error.response); in catch function. It echos The error is : [object Object].

Rahul Jat · Accepted Answer · 2019-09-26 11:49:30Z

18

This is correct and working code solution

The correct way to set headers in Axios

axios.post('http://10.0.1.14:8001/api/logout',request_data, {
          headers: {
              'Content-Type': 'application/json',
              'Authorization': 'Bearer '+token
          },      
      })      
      .then((response) => {
        console.log('response',response.data)

      })
      .catch((error) => {
        alert('error',error.response)
        dispatch(userUpdateProfileFail())

      })

  // console.log('----cheers---------',data)
dispatch(userUpdateProfileSuccess(data))

cheers********

answered Sep 26, 2019 at 11:49

Rahul Jat

7061 gold badge7 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

usamayaseen Over a year ago

How are we supposed to get the token without logging in?

Asif vora · Accepted Answer · 2018-11-27 09:06:32Z

6

You can post axios data by using FormData() like :

And then add the fields to the form you want to send :

let bodyFormData = new FormData();
bodyFormData.set('email',this.state.email);
bodyFormData.set('password', this.state.password);

And then you can use axios post method (You can amend it accordingly)

axios({
    method: 'post',
    url: 'http://127.0.0.1:8000/api/login',
    data: bodyFormData,
    config: { headers: {'Content-Type': 'multipart/form-data' }}
    })
    .then(function (response) {
        //handle success
        console.log(response);
    })
    .catch(function (response) {
        //handle error
        console.log(response);
    });

answered Nov 27, 2018 at 9:06

Asif vora

3,2853 gold badges18 silver badges35 bronze badges

2 Comments

test team Over a year ago

where should I first three fields? So, what about the payload variable in my code?

David Latty Mar 26 at 18:00

"config" is not a property of axios method

مصطفى · Accepted Answer · 2022-03-17 09:39:28Z

0

Problem with me was Invalid Token so check token ,authorization and unauthenticated.

answered Mar 17, 2022 at 9:39

مصطفى

1,08511 silver badges12 bronze badges

Comments

Muhammad Irtiza · Accepted Answer · 2023-08-29 10:27:36Z

0

I was hitting GitHub API in my application and faced the same issue. My API access token had been expired so the API wasn't sending any results, that's why there was nothing to iterate in my app. I created a new token from settings of GitHub and used that while sending the requests. The issue was resolved.

answered Aug 29, 2023 at 10:27

Muhammad Irtiza

375 bronze badges

Collectives™ on Stack Overflow

Error: Request failed with status code 401 axios in React JS

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related