在 MEAN Stack 应用程序中重新加载页面后无法获取 /page

Question

我已使用自定义域将我的 MEAN Stack 项目推送到 Heroku。当我尝试检查每条路线时，一切都运行良好。但是当我重新加载页面时，或者当我使用该路由的 URL 访问某个页面时，它会返回：

无法获取 /page

它怎么会发生？以及如何解决？谢谢。

如果需要，这是我的 app.js 文件：

const express   = require('express');
const path      = require('path');
const bodyParser= require('body-parser');
const passport  = require('passport');
const mongoose  = require('mongoose');
const config    = require('./config/database');
const port      = process.env.PORT || 8080;
const cors      = require('cors');
const app       = express();
const users     = require('./routes/users');
const companies = require('./routes/companies');
const reports   = require('./routes/reports');

app.use(cors());

mongoose.connect(config.database);

mongoose.connection.on('connected', ()=>{
    console.log('Connected to ' +config.database);
});

mongoose.connection.on('error', (err)=>{
    console.log('Unable to Connect ' +config.database);
});

app.use(express.static(path.join(__dirname,'public')));

app.use(bodyParser.json());

app.use(passport.initialize());
app.use(passport.session());
require('./config/passport')(passport);

app.use('/reports', reports);
app.use('/companies', companies);
app.use('/users', users);
app.get('/',(req, res)=>{
    res.send('Index Page');
});


app.listen(port, () => {
    console.log('Server Running on Port : '+port)
}); 

Answer 1

因此，假设这是一个 SPA，您很可能拥有服务器上不存在的客户端路由，这是经过深思熟虑的，也是创建 SPA（无页面刷新）的主要好处之一。但是，因此存在的问题是，如果您在其中一个路由上刷新，服务器将失败，因为该路由无法匹配。

要解决此问题，您需要确保为客户端应用提供服务的路由始终为应用提供服务（当然，不包括任何现有的服务器 URL）。在 express 中，这可以通过在 URL 模式中使用通配符参数来实现，即

app.get('/*', (req, res) => res.send('Index Page'));

这将匹配任何路径，从根 URL，不匹配任何以前配置的 URL - 所以在你的例子中，如果你在 /page 上刷新你的应用程序应该呈现。

Answer 2

您设置路由器尝试以下操作并再次将提交推送到heroku。

app.get('/page',function(req,res){
  res.send("page");
});

Answer 3

我正在开发一个 MERN 应用程序并将其部署在 heroku... 每当我刷新或 window.location() 时，我也会收到相同的错误“无法获取 /page” 因此，经过 3 天的试验和部署，我找到了这个解决方案。 在部署之前将其添加到您的 server.js 文件中。

 if(process.env.NODE_ENV === "production") {
    app.use(express.static("client/build"));
    app.get("/*", function(req, res) {
        res.sendFile(path.join(__dirname, "./client/build/index.html"));
      });
}

您可以在 app.listen 之前添加此代码 sn-p。请记住路径中的 ./client/build/index.html 引用了您在远程 heroku master 中的生产构建中的构建文件。

cannot get /page 发生是因为服务器无法找到使用 react-router 或前端中的其他任何东西创建的路由，因此我们需要将应用程序定向到生产构建中的 index.html 以便它启动整个再次前端进程并识别路由...