首页 > 解决方案 > 在我的实时服务器上导航到路由“http://127.0.0.1:8080/login”时收到“Cannot GET /login”错误。“npm start”虽然工作正常

问题描述

我已经构建了一个在从 npm start 命令生成的服务器上运行良好的应用程序,但是当我使用 npm live-server 或 python 简单 HTTPserver 设置服务器时,当我导航到/login 路由。

说“无法获取/登录”。但在任何时候我都不会发送我能说的获取请求。当我导航到 /login 路由时,应该出现的只是一个接受用户信息并发送发布请求以获取令牌的表单。

这是我的 UserActions.js 文件中的所有用户操作。如您所见,它非常小(我什至没有 /register,这是因为我在数据库中只有 1 个管理员用户,无需注册)

usrerActions.js

import {
  SET_USER,
  SET_ERRORS,
  CLEAR_ERRORS,
  LOADING_UI,
  SET_UNAUTHENTICATED
} from "../types";
import axios from 'axios'

export const loginUser = (userData, history) => (dispatch) => {
    dispatch({ type: LOADING_UI });
    axios
      .post("/login", userData)
      .then((res) => {
        const FBIdToken = `Bearer ${res.data.token}`;
        localStorage.setItem("FBIdToken", `Bearer ${res.data.token}`);
        axios.defaults.headers.common['Authorization'] = FBIdToken;
        // dispatch(getUserData());
        dispatch({ type: CLEAR_ERRORS })
        history.push("/");
      })
      .catch(err => {
        dispatch({ 
            type: SET_ERRORS,
            payload: err.response.data
            })
      });
}

export const logoutUser = () => (dispatch) => {
  localStorage.removeItem('FBIdToken');
  delete axios.defaults.headers.common['Authorization'];
  dispatch({ type: SET_UNAUTHENTICATED })
}

export const getUserData = () => (dispatch) => {
    axios.get('/user')
    .then(res => {
        dispatch({
            type: SET_USER,
            payload: res.data
        })
    })
    .catch(err => console.log(err));
}

我的 app.js 与路线

...

const token = localStorage.FBIdToken;
if (token) {
  const decodedToken = jwtDecode(token);
  if (decodedToken.exp * 1000 < Date.now()) {
    store.dispatch(logoutUser());
    window.location.href = "/login";
  } else {
    store.dispatch({ type: SET_AUTHENTICATED });
    axios.defaults.headers.common["Authorization"] = token;
  }
}
function App() {
  document.documentElement.classList.remove("nav-open");
  React.useEffect(() => {
    document.body.classList.add("index");
    return function cleanup() {
      document.body.classList.remove("index");
    };
  });
  return (
    // <MuiThemeProvider theme={theme}>
    <Provider store={store}>
      <Router>
        <div className="main">
          <Switch>
            <Route exact path="/" component={home} />
            <Route exact path="/products" component={products} />
            <Route exact path="/retreats" component={retreats} />
            <Route exact path="/tarot" component={tarot} />
            <Route
              path="/artist"
              render={props => <ProfilePage {...props} />}
            />
            <Route exact path="/login" component={login} />
          </Switch>
        </div>
        <Footer />
      </Router>
    </Provider>
    // </MuiThemeProvider>
  );
}

export default App;

还有我的 login.jsx 页面组件

import React, { Component } from "react";

...

export class login extends Component {
  constructor(){
    super();
    this.state = {
      email: '',
      password: '',
      errors: {}
    }
  }

  componentWillReceiveProps(nextProps) {
    if(nextProps.UI.errors) {
      this.setState({ errors: nextProps.UI.errors })
    }
  }

  handleSubmit = (event) => {
    event.preventDefault();
    const userData = {
      email: this.state.email,
      password: this.state.password
    }
    this.props.loginUser(userData, this.props.history);
  }

  handleChange = (event) => {
    this.setState({
      [event.target.name]: event.target.value
    })
  }

  render() {
    // loading was before: { classes, UI: { loading } }
    const { classes, loading } = this.props;
    const { errors } = this.state;
    return (
      <>
      <IndexNavbar />
      <ProfilePageHeader />
      <Grid container className={classes.form}>
        <Grid item sm />
        <Grid item sm>
          <ChangeHistoryIcon />
          <Typography variant="h3" className={classes.pageTitle}>
            Login
          </Typography>
          <form noValidate onSubmit={this.handleSubmit}>
            <TextField
              id="email"
              name="email"
              type="email"
              label="Email"
              className={classes.textField}
              helperText={errors.email}
              error={errors.email ? true : false}
              value={this.state.email}
              onChange={this.handleChange}
              fullWidth
            />
            <TextField
              id="password"
              name="password"
              type="password"
              label="Password"
              className={classes.textField}
              helperText={errors.password}
              error={errors.password ? true : false}
              value={this.state.password}
              onChange={this.handleChange}
              fullWidth
            />
            {errors.general && (
              <Typography variant="body2" className={classes.customError}>
                {errors.general}
              </Typography>
            )}
            <Button
              type="submit"
              variant="contained"
              color="primary"
              className={classes.button}
            >
              Login
              {loading && (
                <CircularProgress size={30} className={classes.progress} />
              )}
            </Button>
          </form>
        </Grid>
        <Grid item sm />
      </Grid>
    </>
    );
  }
}

login.propTypes = {
  classes: PropTypes.object.isRequired,
  loginUser: PropTypes.func.isRequired,
  user: PropTypes.object.isRequired,
  UI: PropTypes.object.isRequired
}

const mapStateToProps = (state) => ({
  user: state.user,
  UI: state.UI
});

const mapActionsToProps = {
  loginUser
}

export default connect(mapStateToProps, mapActionsToProps)(withStyles(styles)(login));

有谁知道当我明显发送一个帖子请求时为什么会出现这个错误?

任何帮助是极大的赞赏!

并且我注意到这可能是我的后端没有呈现索引文件的问题?我不确定在这里做什么。这是我的后端索引文件

const functions = require('firebase-functions');

const app = require('express')();

const FBAuth = require('./util/fbAuth')

const cors = require('cors');
app.use(cors());


const { getAllPosts, createOnePost, getThePost, deletePost, uploadImage } = require('./handlers/posts');
const { login } = require('./handlers/users');

// Posts Routes

app.get('/posts', getAllPosts);
app.get('/post/:postId', getThePost);
app.post("/post", FBAuth, createOnePost);
app.delete('/post/:postId', FBAuth, deletePost);
app.post('/post/:postId/image', FBAuth, uploadImage);
//TODO update post

// Login Route
app.post('/login', login)

exports.api = functions.https.onRequest(app)

标签: node.jsreactjsexpressaxiosreact-router-dom

解决方案


所以我假设你正在使用反应路由器 dom。您在使用 <Link to='/login' > 吗?还是您正在使用另一种实际发送获取请求的方式,例如标签?React Router Dom 需要您使用它们的组件来导航事物的反应方面。


推荐阅读