文章

Nginx对单页面网页的反代问题

Nginx对单页面网页的反代可能引起的404错误

Nginx对单页面网页的反代问题

描述

最近在写学校社团的网站,网站时单页应用

在一次分享链接时发现只要不是从根路径https://example.com/进入网站,直接点击链接https://example.com/somePath时Nginx会报错404

原因与解决方法

Nginx原配置如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
server {
        listen       8924;
        listen       [::]:8924;
        server_name  _;
        root         /var/www/ita;
        index        index.html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;
 
        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }

Nginx在反代的过程中一旦碰到了带有Path的情况,默认会从对应的目录加载对应的html或index文件

而我的单页应用则是所有内容都由主页交给vuerouter处理,主页负责解析url加载对应的页面

当用户访问/somePath时,我的对应路径并没有文件,所以会返回404

此时只需要加入一行找不到文件自动退回到主页/index.html即可,router会自动处理需要呈现的页面

于是加入

1
2
3
location / {
                try_files $uri $uri/ /index.html;
        }

变成

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
server {
        listen       8924;
        listen       [::]:8924;
        server_name  _;
        root         /var/www/ita;
        index        index.html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

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

 
        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }

问题解决

本文由作者按照 CC BY 4.0 进行授权