How does Nginx solve the 404 problem of page refresh in history mode?

Pre-knowledge

• Single page application (SPA - single page application)
  Only load the page for the first time When, the only HTML page and its public static resources are returned, and subsequent page jumps will not fetch the HTML file from the server. (Hash and history routing implement browser url changes without refreshing the page)

• hash routing
  Example: www.baidu.com/#/home, originally hash is used to combine The anchor point realizes the control of the page view. When the value after # changes, the page will not be re-requested. This is mainly achieved through the onhashchange method of the window.

• history routing
  Compared with hash routing, the most intuitive change is that there is no # in the routing. By calling a series of methods on the window.history object, the page is not refreshed. Jump(pushState, replaceState).

In history mode, because the url has changed, if you refresh the page manually at this time, the browser thinks it is requesting a new page (initiating a new Http request), and the new page is Does not exist (if the backend is not configured), resulting in 404.

Let’s briefly describe what happens after entering the IP or domain name on the browser (it feels a bit like an interview question????). After pressing Enter, the http sent by the browser will request html. After a series of forwarding and addressing parsing, the file is received by port 80 (default) on the server where the target IP is located. At this time, the problem arises. After the server's 80 interface receives the HTTP request, it does not know what to do. To return something, this time you need Nginx to perform static resource proxy and tell the server what static files to return

Nginx

For general project deployment, we need to deal with nginx. conf configuration file
What you need to know about this file is as follows

   ....
   # http 是指令块，针对http网络传输的一些指令配置
   http {
       #文件扩展名与文件类型映射表 
       include mime.types;
       #设置客户端与服务端请求的超时时间
       keepalive_timeout  65;
       # 开启压缩功能，目的：提高传输效率，节省带宽 
       gzip on
       server {
          #监听端口
          listen   80;
          #服务命名，最好就是用这个服务器的域名命名
          server_name localhost;
          #指令块，配置外部访问资源和实际资源的对应关系
          location /{
              root /usr/blog; #表示静态资源所在的目录
              index  index.html index.htm; #访问这个路径对应的默认静态资源文件或者网页
          }
       }
   }

location

Syntax

   location [=|~|~*|^~|@] uri { ... } 
   location @name { ... }

• =: indicates exact match

• ~: Indicates case-sensitive regular matching

• ~*: Indicates case-insensitive regular matching

• ^~: Indicates that the URI starts with a regular string

• !~: Indicates case-sensitive regular expression mismatch

• !~*: Indicates case-insensitive regular non-matching

• /: Universal matching, any request will be matched to

Common matching rules

   # 将所有请求直接转发给服务器的9090端口
    location = / {
      proxy_pass http://127.0.0.1:9090/;
    }
    # 目录匹配 
    location ^~ /static/ { 
        root /webroot/static/;
    } 
    # 后缀匹配 
    location ~* \.(gif|jpg|jpeg|png|css|js|ico)$ { 
        root /webroot/res/; 
    }
    # 将/account/开始的请求转发给Account服务器
    location /account/ {
        proxy_pass http://127.0.0.1:8080/
    }
    # 将/order/开始的请求转发给Order服务器
    location /order/ {
        proxy_pass http://127.0.0.1:9090/
    }

root and alias

The difference between the two is how nginx interprets the url after location

[root]
Syntax: root path
Default value: root html
Configuration section: http, server, location, if
Processing result: root path + location path

[alias]
Syntax: alias path
Configuration section :location
Processing results: Use alias path to replace location path

   # 返回/www/root/html/t/a.html的文件
   location ^~ /t/ { 
       root /www/root/html/;
   } 
   # 返回/www/root/html/new_t/a.html的文件 
   # 把location后面配置的路径丢弃掉，把当前匹配到的目录指向到指定的目录。 
   location ^~ /t/ { 
       alias /www/root/html/new_t/; 
   }

Solve the problem of 404 after refreshing

It can be known from the above knowledge that after refreshing, the browser will The current url requests the html file, but SPA only has one html file, so you need to configure a line of code in the corresponding location of nginx.conf try_files $uri $uri/ /index.html; Tell nginx if in order Check whether the file exists, if not, redirect to the index.html file

The above is the detailed content of How does Nginx solve the 404 problem of page refresh in history mode?. For more information, please follow other related articles on the PHP Chinese website!