javascript - 错误：React JS 中的请求失败，状态码为 401 axios

Question

我正在使用 Laravel API 和 ReactJS 前端创建一个登录页面。我在 ReactJS 中使用Axios来解析username(email)和password. login 的 APIhttp://127.0.0.1:8000/api/login在 postman 中可以正常工作form-data。但是当我进入反应前端时，回email显是axios的catch函数抛出的这个错误。我也在使用查询字符串npm。那么哪个会引发这个错误？passwordError: Request failed with status code 401.

我的反应 JS 代码

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;

以下是 Laravel API 登录代码，需要email和password

Laravel 登录 API 代码

<?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); 
        } 
    }
}

更新

正如亚历克斯在这里所说，我改变console.log("The error is : " + error); 了功能。它呼应。console.log("The error is : " + error.response);catchThe error is : [object Object]

标签： javascriptreactjsaxios

Answer 1

您可以使用FormData()发布 axios 数据，例如：

然后将字段添加到您要发送的表单中：

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

然后你可以使用 axios post 方法（你可以相应地修改它）

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);
    });