Question

我使用RouterModule创建了一个Angular 4应用。它由一台服务器提供服务，它对同一台机器上托管的不同端口上的另一台服务器进行API调用。为了应对跨源问题，我使用NGINX反向代理，一切正常。

问题是当我在浏览器中直接输入URL时 - Angular应用程序的路由器没有被激活，我收到错误404.

实施例。如果我粘贴http://my-app/dashboard该应用未加载，我会收到404。

这是Angular配置：

const routes: Routes = [
    { path: '', redirectTo: 'home', pathMatch: 'full' },
    { path: 'home', component: HomeComponent},
    { path: 'dashboard', component: DashboardComponent}
]
const routing: ModuleWithProviders = RouterModule.forRoot(routes);

@NgModule({
    imports: [
        routing,
        ...
    ],
    declarations: [AppComponent],
    providers: [...],
    bootstrap: [AppComponent]
})
export class AppModule { }

我使用http-server为应用程序提供服务，使用另一个应用程序服务器（Tomcat）为API调用提供服务。

服务器：

Server Type | Port  | Purpose
---------------------------------
http-server | 8081  | Angular App
tomcat      | 8080  | API

NGINX配置：

upstream my_api_server {
  server localhost:8080;
}

upstream my_angular_app {
  server localhost:8081;
}

server {
  listen 80 default_server;

  location /api {
    proxy_pass http://my_api_server/api;

    proxy_http_version 1.1;
    proxy_set_header Host               $host;
    proxy_set_header X-Real-IP          $remote_addr;
    proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto  $scheme;
  }

  location / {
    proxy_pass http://my_angular_app;

    proxy_http_version 1.1;
    proxy_set_header Host               $host;
    proxy_set_header X-Real-IP          $remote_addr;
    proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto  $scheme;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_redirect off;
  }
}

那么如何让NGINX接受/dashboard作为Angular应用程序的一部分？

注意：我知道只需使用NGINX来服务Angular应用程序而不是http服务器就可以轻松绕过这个问题，但这不是重点。

Angular app和API都支持NGINX反向代理

0 个答案: