我的Angular 6路由在Nginx代理后面刷新页面后返回404 [英] My Angular 6 routing returns 404 after page refresh behind Nginx proxy

问题描述

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

I have my angular app running inside docker that exposed on port 83, and I also have a spring-boot rest app inside another docker that exposed on port 8083.

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

In the host server I have one Nginx server that reroute every requests using below config:

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应用程序春季启动休息应用程序.

With above config, every request that uses mydomain.com will goes to my Angular 6 app, and every request that uses rest.mydomain.com will goes to my spring-boot rest app.

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

In the index page of my angular, I have a search form which will trigger the Routing module to open a search result page.

我的 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
];

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

And the trigger on my search form is like below:

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

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

Everything works well, when I click the search button, my angular will open the search result page and shows the results.

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

My problem is, whenever I click REFRESH button on the browser, instead of a search page result, it shows 404 page. Why is this happen?

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

Any advice would be appreciated. Thanks

推荐答案

您需要添加 try_files 语句，但是由于使用的是proxy_pass，这会使事情变得更加复杂.这未经测试，但是您可以尝试以下方法:

You need to add a try_files statement, but because you are using a proxy_pass this makes things a bit more complicated. This is untested but you can try this:

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

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

这篇关于我的Angular 6路由在Nginx代理后面刷新页面后返回404的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！