手动输入 url 时，角度路由表现得很奇怪答案

【问题标题】：Angular routing acting strange when url is manually typed手动输入 url 时，角度路由表现得很奇怪
【发布时间】：2019-05-20 13:15:04
【问题描述】：

我正在构建一个 Web 应用程序，前端使用 Angular 7，后端使用 NodeJS、MongoDB 和 ExpressJS。只要我与应用程序交互以进行导航，应用程序就会按预期运行，但是当我手动键入路径时，它似乎没有命中路由的组件。它在本地运行良好，但在 Heroku 上却不行。

这是我的 app-routing.module.ts：

const routes: Routes = [{ 
  path: "login", 
  component : LoginComponent
  },
  {
  path: "registration", 
  component : SignupComponent
  },
  {
    path: "votes", 
    component : VotesComponent
  },
  {
    path: "votes/:website", 
    component : VoteComponent
  },
  { 
    path: "**", 
    redirectTo: "votes" 
  }
];

@NgModule({
  imports: [CommonModule, RouterModule.forRoot(routes, { enableTracing: false})],
  exports: [RouterModule]
})
export class AppRoutingModule { }

我在 Express 中的所有路由都以 /api/ 为前缀，例如：

app.get('/api/votes', (req, res, next) => {
  const limit = parseInt(req.query.limit)
  db.getVotes(limit).then((votes) => {
    res.json(votes);
});

});

我像这样检查 jwt：

app.use(
    checkJwt({ secret: process.env.JWT_SECRET }).unless({ path: [ 
              { url: "/api/authenticate", methods: ['POST'] }, 
              { url: "/api/votes", methods: ["GET"]}]})
);

app.use((err, req, res, next) => {
    if (err.name === 'UnauthorizedError') {
        res.status(401).send({ error: 'Not authorized.' });
    };
});

我的投票是这样进行的：

private baseUrl = environment.apiUrl;

this.http.get<any[]>(`${this.baseUrl}/votes`, this.httpOptions))).subscribe(data => {
       this.data = data;
});

baseUrl 在 evironment.prod.ts 中定义如下：

export const environment = {
  production: true,
  apiUrl: '/api'
};

问题来了。如果我在 Heroku 上进行部署并访问 https://myurl.com，我将被重定向到 https://myurl.com/votes，我可以看到请求的 url 是 https://myurl.com/api/votes，所以这一切都很好，我得到了包含所有数据的 angular 应用程序。但是，如果我手动输入https://myurl.com/votes，我会在浏览器中返回JSON，并显示错误“未授权”，我可以看到请求的URL 是https://myurl.com/votes，而不是https://myurl.com/api/votes。任何想法是什么导致了这个？ Angular 似乎没有正确路由它。当它手动输入时，它不会击中我的任何组件。

【问题讨论】：

标签： node.js angular express routing

【解决方案1】：

对于不匹配的路由路径，路由器配置应包括以下一项。

{ 
    path: "", 
    component: "404NotFoundComponent" 
}

【讨论】：

这已经说明，但这并不能解释我的问题。路由应该存在并且在我使用控件时执行，但在我手动输入 url 时不存在。
您能告诉我们您是如何配置内部 url 重定向 'api/votes' 的吗？
作为一个例子，我这样做：routerLink="/votes/{{vote.websiteUrl}}，效果很好。/api-prefix 仅用于调用后端。
当我在本地运行它时，我使用代理文件：{ "/api": { "target": "localhost:8080", "secure": false } }