深度链接时 Angular 9 + Nginx = 404答案

【问题标题】：Angular 9 + Ngnix = 404 when deeplinking深度链接时 Angular 9 + Nginx = 404
【发布时间】：2020-06-25 21:31:03
【问题描述】：

我正在使用nginx 创建一个带有Loopback 4 后端的Angular 9 应用程序。

使用ng serve 时，我可以导航到不同的页面并刷新页面而不会出现问题。但是，在推送到登台服务器后，我可以浏览应用程序，但如果我刷新任何不是 staging.mydomain.com/ 的页面，我会收到 404 错误。

我尝试将try_files $uri $uri/ /index.html; 添加到我的nginx.conf 文件的location 部分，但是当我这样做时，甚至索引页面也不再加载。

您将在下面看到我的nginx.conf 文件的server 部分：

server {

  listen       443 ssl http2;
  listen       [::]:443 ssl http2;
  server_name  staging.mydomain.com; # managed by Certbot
  root         /usr/share/nginx/html;
  ssl_certificate /etc/letsencrypt/live/staging.mydomain.com/fullchain.pem; # managed by Certbot
  ssl_certificate_key /etc/letsencrypt/live/staging.mydomain.com/privkey.pem; # managed by Certbot

  # Load configuration files for the default server block.
  include /etc/letsencrypt/options-ssl-nginx.conf;

  add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;

  location / {
    #try_files $uri $uri/ /index.html;
    proxy_pass http://127.0.0.1:3004;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Conneciton 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
  }

}

server {
  listen 80;
  server_name staging.mydomain.com;
  return 301 https://staging.mydomain.com$request_uri;
}

是否有人能够提供一些指导以使我的深层链接正常工作？

【问题讨论】：

这能解决你的问题吗stackoverflow.com/a/52699493/7743705
没有。当我在location 上方添加它并尝试加载站点时，它会显示“欢迎使用 Amazon Linux AMI 上的 nginx！”欢迎页面（不是我的网站）

标签： angular nginx angular9 nginx-location loopback4

【解决方案1】：

尝试在您的代理通行证语句末尾添加一个额外的/。

location / {
    #try_files $uri $uri/ /index.html;
    proxy_pass http://127.0.0.1:3004/;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Conneciton 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
  }

请注意proxy_pass 中尾随斜线的极端重要性，它会自动更改$uri 变量以使前端的/foo 与后端的/ 相对应。不需要显式的重写指令。

【讨论】：

我刚试过，但恐怕没有用。我仍然收到 404 错误页面。我还尝试取消注释try_files，但结果是空白页。

【解决方案2】：

哎呀，这不是nginx 的问题。这是一个Loopback 配置问题。

我将以下内容添加到我的 application.ts 文件中，以将所有未捕获的请求转发到 index.html 以便 Angular 捕获和处理。

this.static('*', path.join(__dirname, '../public/index.html'));

添加该静态路径后，一切都开始正常工作。

【讨论】：