Question

我有一个NGINX服务器（nginx1）应该代理运行Angular2应用程序的NGINX服务器（nginx2）的所有请求。只有/ api的请求才能发送到asp.net核心服务器（nginx3）。请遵循以下nginx1配置：

 server { # should proxy all requests to nginx2 and /api to nginx3
    listen 80;
    server_name  mywebsite.com;
    location / {
        proxy_set_header Host $host;
        proxy_pass http://mywebsite.com:4999/;
    }
    # proxy para o backend
    location /api {
      proxy_pass http://mywebsite.com:5001;
      proxy_set_header Host $host;
    }
  }

按照下面的nginx2配置：

worker_processes  1;
events {
   worker_connections  1024;
}
http {
   include       mime.types;
   default_type  application/octet-stream;
   sendfile        on;
   keepalive_timeout  65;
   server {
       listen       4999;
       server_name  'mywebsite.com';
       location / {
           root   /usr/share/nginx/html; 
           try_files $uri$args $uri$args/ index.html;
       }
       #error_page  404              /error.html;
       # redirect server error pages to the static page /50x.html
       error_page   500 502 503 504  /50x.html;
       location = /50x.html {
           root   html;
       }
   }
}

如果我尝试打开mywebsite.com，它会正确打开，但如果我输入完整的angular2路径（例如：http://mywebsite.com/orders），我会从nginx1获得错误404。

我错过了什么？

Answer 1

我认为你的问题不在于你的代理，而在于你的NGINX2。在此服务器上，文件夹/ orders不存在，并将404返回到代理NGINX1 - 它将返回给调用者。为了实现这一点，您必须向NGINX2添加重写规则，将重写不是文件或文件夹的everthing重写到您的主angular2 index.html文件。

Answer 2

它似乎与Angular2路由器有关。我将以下行添加到app.module.ts（在nginx2下运行）：

import {HashLocationStrategy, LocationStrategy} from "@angular/common";

    providers: [
            {provide: LocationStrategy, useClass: HashLocationStrategy  },
            ...
    ]

现在，每当我输入http://mywebsite.com/#/orders这样的完整网址或刷新任何网页时，它都能正常运行。

我仍然认为这不是最佳解决方案，因为现在每条路径都以'＃'为前缀，但至少它有效。 :-)

有关angular2 HashLocationStrategy的更多信息，请访问：https://angular.io/docs/ts/latest/guide/router.html

即使使用proxy_pass，NGINX也会返回404

2 个答案: