Nginx 404错误，当现有的url与Angular 2路由被刷新

x6492ojm 于 2022-12-29 发布在 Nginx

关注(0)|答案(3)|浏览(154)

我有一个使用路由的angular 2应用程序。当我点击我的基本URL时，页面会正确加载并路由到下一页。但是，如果我刷新同一页面，它会抛出一个404 error。例如，如果我输入我的基本URL example.com，它会路由到example.com/dashboard，但如果我刷新此页面，它会导致404错误。
我的Nginx配置设置文件中包含以下内容：

server  {
  ssl  on;
  ssl_certificate  Certificate.cer;
  ssl_certificate_key  privateKey.key;

  listen  443 ssl;
  server_name example.com;
  location / {
    include proxy_params;
    proxy_http_version 1.1;
    proxy_buffering off;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_pass  http://localhost/temp/;

 }

 location /app {
    include proxy_params;
    proxy_http_version 1.1;
    proxy_buffering off;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_pass  http://12.34.56.78:5001;

 }

}

刷新页面时出现404错误。基于this link，我修改了Nginx配置，添加了try_files部分，如下所示：

- 更新日期：**

server  {
  ssl  on;
  ssl_certificate  Certificate.cer;
  ssl_certificate_key  privateKey.key;

  listen  443 ssl;
  server_name example.com;
  location / {
    include proxy_params;
    proxy_http_version 1.1;
    proxy_buffering off;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_pass  http://localhost/temp/;
    alias /usr/share/nginx/html/proj1;
    try_files $uri $uri/ /index.html$is_args$args;

 }

 location /app {
    include proxy_params;
    proxy_http_version 1.1;
    proxy_buffering off;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_pass  http://12.34.56.78:5001;

 }

}

与上面它现在抛出错误，它找不到JS文件。所有我的JS文件中引用的index.html（如<script src="app.js"></script>）文件存在于相同的目录index.html。

- 编辑：**这是我在Chrome控制台的网络选项卡中看到的JS错误之一：

**General:**
Request URL: https://example.com/script.js
Request Method: GET
Status Code: 404 Not Found
Referrer Policy: no-referrer-when-downgrade

**Response Header:**
Connection: keep-alive
Content-Length: 571
Content-Type: text/html
Date:
Server: nginx/1.12.2

nginx

来源：https://stackoverflow.com/questions/51987032/nginx-404-error-when-existing-urls-with-angular-2-routing-are-refreshed

3条答案

按热度按时间

f0ofjuux1#

Angular 应用程序是单页应用程序（SPA），这意味着您只能提供一个HTML文件，即index.html
如果我在以下时间刷新：
/home =索引. html
/fred =索引. html
/任意=索引. html
因此，您需要告诉NGINX始终提供index.html，而不管路由如何。
例如：

server {
  listen 8080;
  server_name http://example.com;
  root /path/to/your/dist/location;
  # eg. root /home/admin/helloWorld/dist
  index index.html index.htm;
  location / {
    try_files $uri $uri/ /index.html;
    # This will allow you to refresh page in your angular app. Which will not give error 404.
  }
}

参见How to config nginx to run angular4 application

赞(0）回复(0）举报 2022-12-29

3htmauhk2#

当你在http：///some/path的路径中点击刷新时，你会得到一个404错误页面。在ngnix配置中的这一额外行可以解决这个问题。

server {
  listen 8080;
  server_name http://example.com;
  root /path/to/your/dist/location;
  index index.html index.htm;
  location / {
     try_files $uri $uri/ /index.html?/$request_uri;
    # This will allow you to refresh page in your angular app. 
  }
}

添加后，重新启动nginx服务。

赞(0）回复(0）举报 2022-12-29

xnifntxz3#

以上配置在使用代理时会给予css和js未找到错误。要解决此问题，可以将配置更改为：

...
server_name    drobonation.com www.drobonation.com;
server_tokens  off;
index          index.html index.htm;

location ~ ^.*\.[js|css]+ {
    proxy_pass http://127.0.0.1:4000;
}

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

赞(0）回复(0）举报 2022-12-29

我来回答

Nginx 404错误，当现有的url与Angular 2路由被刷新

3条答案

相关问题

热门标签

最新问答