[英]How do I get my express server to GET a request from my React client app?
I'm working on my first express backend React frontend app. 我正在开发我的第一个Express后端React前端应用程序。 Currently working on the user register/login/logout section. 当前正在用户注册/登录/注销部分。
const express = require('express'); const mongoose = require('mongoose'); const bodyParser = require('body-parser'); const keys = require('./config/keys') const passport = require('passport'); const session = require('express-session'); const LocalStrategy = require('passport-local'); // const passportLocalMongoose = require('passport-local-mongoose'); const User = require('./models/User'); const app = express(); // Use BodyParser app.use(bodyParser.urlencoded({ extended: true })); // Passport app.use(passport.initialize()); app.use(passport.session()); app.use(session({ secret: 'Rusty is the best', saveUninitialized: false, resave: false })); passport.use(new LocalStrategy(User.authenticate())); passport.serializeUser(User.serializeUser()); passport.deserializeUser(User.deserializeUser()); // Connect to the Database const db = keys.mongoURI mongoose .connect(db, { useNewUrlParser: true }) .then(() => console.log(`MongoDB connected...`)) .catch(err => console.log(err)); // Routes const items = require('./routes/api/items') app.use('/api/items', items); // Auth Routes app.post('/register', function(req, res) { User.register(new User({ username: req.body.username }), req.body.password, function(err, user) { if (err) { console.log(err); return res.render('/register'); } passport.authenticate('local')(req, res, function() { res.redirect('/secret'); }) }) }); app.post('/login', passport.authenticate('local', { successRedirect: '/secret', failureRedirect: '/login' }), function(req, res) { }); app.get('/logout', function(req, res) { req.logout(); res.redirect('/'); }) // Port and Listen const port = process.env.PORT || 5000; app.listen(port, () => console.log(`Server started on ${port}...`));
The post routes at the end of my express server.js file work fine, but I have problems when I get to app.get('/logout'). 我的express server.js文件末尾的发布路线可以正常工作,但是当我进入app.get('/ logout')时遇到问题。 My server is running on 5000 and client is on 3000. I have "proxy": " http://localhost:5000 " inside my client project.json. 我的服务器在5000上运行,客户端在3000上运行。我的客户端project.json中有“ proxy”:“ http:// localhost:5000 ”。 localhost:3000/logout returns a blank page while localhost:5000/logout returns the res.send message "You have hit the logout page". localhost:3000 / logout返回一个空白页,而localhost:5000 / logout返回res.send消息“您已点击退出页面”。
Anyone know how I can fix this? 有人知道我该如何解决吗?
edit: Here is my react router to show how the client routes 编辑:这是我的反应路由器,以显示客户端如何路由
import React, { Component } from 'react'; import { Route, BrowserRouter } from 'react-router-dom'; import Input from './components/Input'; import SignUp from './components/SignUp'; import Form from './components/Form'; import LogIn from './components/LogIn'; import SignUp2 from './components/SignUp2'; import Profile from './components/Profile'; import Home from './components/Home'; import LogOut from './components/LogOut'; class App extends Component { render() { return ( <BrowserRouter> <div> <Route exact path='/' component={ Home } /> <Route path='/register' component={ SignUp2 } /> <Route path='/changeThisBackToRegister' component={ SignUp } /> <Route path='/form' component={ Form } /> <Route path='/login' component= { LogIn } /> <Route path='/profile' component = { Profile } /> <Route path='/secret' component = { Input } /> <Route path='/logout' component = { LogOut } /> </div> </BrowserRouter> ); } } export default App;
Change your /logout
api response to send json
response. 更改/logout
api响应以发送json
响应。
app.get('/logout', function(req, res) {
req.logout();
res.json({success: true});
})
In your Logout
component, make /logout
call when the component mounts. 在Logout
组件中,在挂载组件时进行/logout
调用。
import React, { Component } from 'react';
export default class Logout extends Component {
constructor(props) {
super(props);
this.state = {
logoutSuccess: false
};
}
componentDidMount() {
fetch('/logout')
.then((response) => response.json())
.then(() => {
this.setState({logoutSuccess: true});
});
}
render() {
const { logoutSuccess } = this.state;
return (
<div>
{ logoutSuccess && (<div>Logout Success</div>)}
</div>
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.