尝试导航到 heroku 中的登录路由时出现 404 错误

Question

我已将我的 mern 应用程序部署到 heroku，但是当我尝试通过输入 url 导航到路线时，它显示 404 页面错误。导航栏链接工作正常，它们成功地导航到登录和注册页面，但是当我单击 forms 中的注册、登录链接。这些链接已损坏，它显示加载资源失败：服务器响应状态为 404（未找到）。 您可以在https://fullstack-restaurant-app97.herokuapp.com/查看我的应用程序，当我导航到https://fullstack-restaurant-app97.herokuapp.com/signin或https://fullstack-时出现错误restaurant-app97.herokuapp.com/signup路线。

{
  "name": "backend",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "build": "cd frontend && npm run build",
    "install-frontend": "cd frontend && npm install",
    "start": "node ./src/server.js",
    "server": "nodemon ./src/server.js",
    "frontend": "cd frontend && npm start",
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false && npm run install-frontend && npm run build"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bcrypt": "^5.0.0",
    "cors": "^2.8.5",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "express-validator": "^6.6.1",
    "jsonwebtoken": "^8.5.1",
    "mongoose": "^5.10.0",
    "multer": "^1.4.2",
    "path": "^0.12.7",
    "shortid": "^2.2.15"
  },
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

应用程序.js

import React, { useEffect } from 'react';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import Signin from './containers/Signin';
import Signup from './containers/Signup';
import Home from './containers/Home';
import './App.css';
import { useDispatch, useSelector } from 'react-redux';
import { isUserLoggedIn } from './actions';
import CssBaseline from '@material-ui/core/CssBaseline';


function App() {

  const dispatch = useDispatch();
  const auth = useSelector(state => state.auth)

  useEffect(() => {
    if(!auth.authenticate){
      dispatch(isUserLoggedIn())
    }
    
  }, [])
  return (
    <>
    <CssBaseline/>
    <Router>
      <Route exact path="/" component={Home} />
      <Route path="/signin" component={Signin} />
      <Route path="/signup" component={Signup}/>    
    </Router>
    </>
      );
}

export default App;

服务器.js

const express= require('express');
const app= express();
const mongoose= require('mongoose');
const env= require('dotenv').config();
const PORT= process.env.PORT || 2000;
const adminRoutes= require('./routes/admin/auth');
const restaurantRoutes= require('./routes/restaurant')
const cors= require('cors');
const path= require('path');

mongoose.connect(process.env.MONGODB_URI || `mongodb+srv://${process.env.MONGO_DB_USER}:${process.env.MONGO_DB_PASSWORD}@cluster0.e4r3t.mongodb.net/${process.env.MONGO_DB_DATABASE}?retryWrites=true&w=majority`, 
{
    useNewUrlParser: true, 
    useUnifiedTopology: true,
    useCreateIndex:true
}).then(() => {
    console.log('Database connected');
});

app.use(cors());
app.use('/public', express.static(path.join(__dirname,'uploads')));
app.use(express.json());
app.use('/api', adminRoutes);
app.use('/api', restaurantRoutes);


if(process.env.NODE_ENV=='production'){
    app.use(express.static("frontend/build"))
    app.get('*', (req, res) => {
        res.sendFile(path.resolve(__dirname, 'frontend', 'build', 'index.html'))
    })

    
}



app.listen(PORT, () => {
    console.log(`Server is listening on port ${PORT}`);
})

我还将链接添加到我的 github 存储库https://github.com/codinghamster12/fullstack-restaurant-webapp我已经尝试修复这个问题好几天了，如果有人能调查一下，我将不胜感激。 谢谢！

Answer 1

我不能直接说这就是发生这种情况的原因。 但是您可以使用一种简单的方法来找出问题所在。 导航到项目文件夹并从该位置打开 cmd。 然后，使用heroku login命令登录到您的 heroku 帐户。 然后键入heroku logs -t命令，它将显示您的服务器的状态，API 调用 init。 如果有任何错误，您可以看到红色的错误消息。 然后go通过它你肯定可以想出一个解决方案，用这个方法。