平均堆栈：刷新或输入直接 URL 会导致“无法 GET/”？

Posted 2023-03-07

【中文标题】平均堆栈：刷新或输入直接 URL 会导致“无法 GET/”？

【英文标题】：Mean Stack: Refreshing or entering a direct URL lead to 'Cannot GET/'?

【发布时间】：2019-03-01 16:41:37

【问题描述】：

我使用 MEAN 堆栈创建了一个网页。角 5。

我遇到的一个问题是我无法输入直接 url 路径。例如，如果我最后输入 /home，我会收到此错误消息“无法获取 /home”。当我也点击刷新时会发生这种情况。如果我从主页单击“主页”导航按钮，该页面运行良好。

例如： 这是我的页面：https://nameless-hollows-54410.herokuapp.com/

当我转到直接链接时，https://nameless-hollows-54410.herokuapp.com/home

页面已损坏。为什么会这样？

我的应用路由代码：

const routes: Routes  = [
   path: '', redirectTo: '/home', pathMatch: 'full' ,
   path: 'home', component: HomeComponent,
];

我的导航栏：

<li class="nav-item active">
   <a class="nav-link" routerLink="/home">Home
       <span class="sr-only">(current)</span>
   </a>
</li>

【问题讨论】：

这看起来像是您的主机配置有问题，您是否正确配置了重写？

什么意思？我不认为我有太大的变化。我遵循了本指南：devcenter.heroku.com/articles/mean-apps-restful-api

【参考方案1】：

让我解释一些事情。

这不是前端问题。当您通过单击链接从您的角度应用程序中调用“/home”时，它工作正常。因为你的 Angular 应用知道路线。

但在直接调用'my-site-address/home'时，它试图找到'/home' 在您的节点应用程序中。由于您的节点应用程序中没有“/home”路由，因此这是一条死胡同。

所以问题是当你直接调用'my-site-address/home'时，'/home' 不到达前端路由，而是尝试通过节点应用程序路由。

要解决问题，对于每条路线，从您的节点应用程序，您必须 加载构建文件（对于角度可能是'index.html'）。

为此，请确保您的节点应用针对任何未知路由加载 index.html(angular build) 文件。

你在 node js 路由中的代码应该是这样的。

app.use('*', (req, res, next) => 
    res.sendFile(path.join(__dirname, 'angular build file path'));
);

将路由放在路由器的最后一部分。

另外，用角度构建文件路径替换“角度构建文件路径”，在您的情况下可能是“index.html 文件路径”。

您也可以查看source code（关注第78行和项目结构）。

【讨论】：

很高兴为您提供帮助。