node.js - 在我的实时服务器上导航到路由“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)
解决方案
所以我假设你正在使用反应路由器 dom。您在使用 <Link to='/login' > 吗?还是您正在使用另一种实际发送获取请求的方式,例如标签?React Router Dom 需要您使用它们的组件来导航事物的反应方面。
推荐阅读
- java - SpringBoot 将配置存储在 BOOT 中
- excel - 需要使用 Outlook 在邮件正文中创建多行
- java - wagon-ftp "连接超时"
- java - 使用 cplex 时优化中的条件约束
- ios - 无法将来自 Alamofire GET 请求的 JSON 数据保存到函数的局部变量
- cluster-analysis - 选择不重叠的最佳质量集群
- json - Newtonsoft JsonConvert.SerializeObject 双引号
- typescript - 为什么从打字稿命名空间中导出成员并不总是需要导出?
- tensorflow - tf.datasets input_fn 在 1 个 epoch 后出现错误
- python - 在 Python 中仅分配多个函数输出之一的最快方法