问题:我的 Angular 6 路由在 Nginx 代理后面的页面刷新后返回 404

我的 angular 应用程序在 docker 内运行,暴露在端口 83 上,我还有一个 spring-boot rest 应用程序在另一个 docker 内,暴露在端口 8083 上。

在主机服务器中,我有一个 Nginx 服务器,它使用以下配置重新路由每个请求:

server {
    listen 80;
    server_name mydomain.com;

    location / {
        proxy_pass http://127.0.0.1:83;
    }
}

server {
    listen 80;
    server_name rest.mydomain.com;

    location / {
        proxy_pass http://127.0.0.1:8083;
    }
}

使用上述配置,每个使用 mydomain.com 的请求都将发送到我的 Angular 6 应用程序,每个使用 rest.mydomain.com 的请求将发送到我的 spring-boot rest 应用程序。

在我的 Angular 的索引页面中,我有一个搜索表单,它将触发路由模块打开一个搜索结果页面。

我的 app-routing.module.ts 如下所示:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomePgComponent } from './home-pg/home-pg.component';
import { ResultsPgComponent } from './results-pg/results-pg.component';

const routes: Routes = [
  { path: "", component: HomePgComponent },
  { path: "search", component: ResultsPgComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(
    routes,
    { enableTracing: true }
  )],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule { }
export const RoutingComponents = [
  HomePgComponent, 
  ResultsPgComponent
];

我的搜索表单上的触发器如下所示:

onSearchBtnClk(el) {
    if (el.value.length > 0) {
      console.log(">>> SEARCH ARGS = " + el.value);
      this.router.navigate(['/search'], { queryParams: { q: el.value }});
      this.newArgsEmitter.emit(el.value);
    }
}

一切正常,当我单击搜索按钮时,我的 Angular 将打开搜索结果页面并显示结果。

我的问题是,每当我点击浏览器上的 REFRESH 按钮时,它会显示 404 page 而不是搜索页面结果。为什么会这样?

任何意见,将不胜感激。谢谢

解答

您需要添加一个try_files语句,但是因为您使用的是代理_pass,所以这会使事情变得更加复杂。这是未经测试的,但你可以试试这个:

server {
    listen 80;
    server_name mydomain.com;
    try_files $uri $uri/ /index.html @proxy;    

    location @proxy {
      proxy_pass http://127.0.0.1:83;
    }
}

“@”前缀定义了一个命名位置。这样的位置不用于常规请求处理,而是用于请求重定向。它们不能嵌套,也不能包含嵌套位置。

阅读更多