为什么我的 axios 请求不能返回正确的数据？

Question

我有一个 api 在我的 axios 实例中使用的 url 上运行。 如果提供了有效凭据，则为登录定义了一个路由，该路由返回 JWT 访问和刷新令牌。 我可以使用 postman 对其进行测试，并且一切正常，但是在我使用 axios 的应用程序中，即使使用有效凭据也不会返回任何令牌或错误。 API 也为 cors 设置并且正在实时运行。

这是 axios 实例：

import axios from 'axios';

const url = NOT SHOWN;

const axiosInstance = axios.create({
  baseURL: url,
  headers: {
    'Content-Type': 'application/json',
  },
});

export default axiosInstance;

这是基本的登录组件：

import React, { Component } from 'react';
import { Link as RouteLink, Redirect } from 'react-router-dom';
import axiosInstance from '../../axiosInstance';

//material ui
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import TextField from '@material-ui/core/TextField';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import Link from '@material-ui/core/Link';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';

class Login extends Component {
  state = {
    email: '',
    password: '',
    isAuthenticated: false,
  };

  login(email, password) {
    const data = {
      email: email,
      password: password,
    };
    axiosInstance
      .post('/login', data)
      .then((res) => {
        console.log(res.data);
      })
      .catch((err) => {
        console.log(err);
      });
  }

  onSubmit = (e) => {
    const { email, password } = this.state;
    this.login(email, password);
  };

  onChange = (e) => this.setState({ [e.target.name]: e.target.value.trim() });

  render() {
    if (this.state.isAuthenticated) {
      return <Redirect to='/' />;
    }
    return (
      <Container component='main' maxWidth='xs' style={{ marginTop: '75px' }}>
        <CssBaseline />
        <div>
          <Typography component='h1' variant='h3' align='center'>
            Login
          </Typography>
          <form noValidate>
            <TextField
              variant='outlined'
              margin='normal'
              required
              fullWidth
              id='email'
              label='Email Address'
              name='email'
              autoComplete='email'
              autoFocus
              onChange={this.onChange}
            />
            <TextField
              variant='outlined'
              margin='normal'
              required
              fullWidth
              name='password'
              label='Password'
              type='password'
              id='password'
              autoComplete='current-password'
              onChange={this.onChange}
            />
            <FormControlLabel
              control={<Checkbox value='remember' color='primary' />}
              label='Remember me'
            />
            <Button
              type='submit'
              fullWidth
              variant='contained'
              color='primary'
              //className={classes.submit}
              onClick={this.onSubmit}
            >
              LOGIN
            </Button>
            <Grid container>
              <Grid item xs>
                <Link variant='body2'>Forgot password?</Link>
              </Grid>
              <Grid item>
                <Link component={RouteLink} to={'/signup'} variant='body2'>
                  {"Don't have an account? Sign Up"}
                </Link>
              </Grid>
            </Grid>
          </form>
        </div>
      </Container>
    );
  }
}

export default Login;

'''

Answer 1

我相信登录 function 没有正确定义，所以它没有被调用。 请尝试使用 function 表达式：

login = (email, password) => {
    const data = {
      email: email,
      password: password,
    };
    axiosInstance
      .post('/login', data)
      .then((res) => {
        console.log(res.data);
      })
      .catch((err) => {
        console.log(err);
      });
  }

  onSubmit = (e) => {
    const { email, password } = this.state;
    login(email, password);
  };