Question

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

在主机服务器中，我有一台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 的请求将转到我的Angular 6应用程序春季启动休息应用程序。

在我的角度索引页面中，我有一个搜索表单，它将触发“路由”模块打开搜索结果页面。

我的 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);
    }
}

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

我的问题是，每当我单击浏览器上的刷新按钮时，它就会显示 404页面，而不是搜索页面结果。为什么会这样？

任何建议将不胜感激。谢谢

Answer 1

您需要添加一个from collections import OrderedDict print(json.dumps(list(json.loads(j).values()), object_pairs_hook=OrderedDict))语句，但是因为您使用的是proxy_pass，这会使事情变得更加复杂。这未经测试，但是您可以尝试以下方法：

try_files

Answer 2

这是因为Agular应用程序是单页应用程序（SPA）。

刷新应用程序时，您的nginx配置需要始终提供index.html。

当前，当您刷新时，例如说/ some-path

nginx默认情况下将查找名为/some-path.html的文件，该文件显然不存在。

要始终提供index.html，您需要对nginx.conf进行如下调整：

Nginx config for single page app with HTML5 App Cache

以下是该链接接受的答案的摘录：

root /files/whatever/public;
index index.html;

location / {
    try_files $uri /index.html =404;
}

# Proxy requests to "/auth" and "/api" to the server.
location ~ ^/(auth|api) {
    proxy_pass http://application_upstream;
    proxy_redirect off;
}

此外，只有Google将Nginx配置为提供单页应用程序

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

2 个答案: