Collectives™ on Stack Overflow
Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
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)
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>
<Col xs="6">
<Button color="primary" className="px-4" onClick={this.onClick}>
Login
</Button>
<Col xs="6" className="text-right">
<Button color="link" className="px-0">
Forgot password?
</Button>
</CardBody>
</Card>
className="text-white bg-primary py-5 d-md-down-none"
style={{ width: 44 + "%" }}
<CardBody className="text-center">
<h2>Sign up</h2>
Are you a new user to the Restaurant system? Hooray now , you can create an account...
<Button color="primary" className="mt-3" active>
Register Now!
</Button>
</CardBody>
</Card>
</CardGroup>
</Container>
export default Login;
The following is the Laravel API login code which requires the email and password
Laravel login API code
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);
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].
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********
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);
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
