06. The problem of page white screen, 401, 404 after vue history mode is refreshed

Let’s first look at the problem of 404

The vue project uses the history routing mode. After the page is refreshed, problems such as a white screen with no content, 401, 404, etc. appear. First look at the difference between the two routing modes:

• hash: http://localhost:8082/#/customer/account
• history: http://localhost:8082/customer/account

The difference between the two is mainly:

1. Routing format. hashThe mode separates the route by #, historythe mode does not;
2. Service access. hashThe mode does not require server configuration and can be accessed directly without reporting errors; but historyrequires relevant configuration on the server side, otherwise problems such as flashing 404 and 401 will occur.

The system was in the first hashmode. After changing to historythe mode, 404 appeared on refresh. Therefore, nginxthe configuration was modified. The configuration content is as follows:

    server {
    
    
        listen       18080;
        server_name  localhost;
		
		# 我们的静态文件部署在根目录的/portal/admin-console/文件夹下，所以配置访问该目录即可
		location /portal/admin-console/ {
    
    
			root app;
			index index.html;
			# 主要为这一行，解决了404的问题
			try_files $uri $uri/ /portal/admin-console/index.html;
		}
		
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
    
    
            root   html;
        }
    }

404The meaning is that the interface cannot be found, so when accessing the deployment directory of static files, pass try_files $uri $uri/ /portal/admin-console/index.html;and locate the files /portal/admin-console/in the directory . At this time, the access will not work.index.html404

If it is hashmode, these configurations are not required. Therefore, if you think about convenience, you can directly choose to use hashmode instead of historymode.

Of course, there are some other differences between hashmodes and modes, which can be understood before making conclusions.history

Let's talk about the 401 problem

401 errors are generally net::ERR_ABORTED 401. When accessing the wrong connection, you will find that the error message status is: UNAUTHORIZED

However, there are several reasons for 401, generally including:

1. Outdated Browser Cache and Cookies, browser cache or Cookies expired
2. Plugin Incompatibility, incompatibility problems caused by
3. Incorrect URL or Outdated Link, access connection error, this possibility has a high probability of occurrence

How to fix it?

1. Look for Errors in the URL, check if there is an access path error (my problem this time is because the access path is capitalized wrongly...)
2. Clear Your Browser's Cache, clear cache
3. Flush Your DNS, refresh the DNS cache. It rarely occurs. When the above 1 and 2 are not working, you can try
4. Deactivate Your WordPress Plugins, deactivate WordPress Plugins, rarely use it...
5. Check the WWW-Authenticate Header Response, check the WWW-Authenticate response header

The above can basically fix the 401 problem. The complete content of the solution comes from https://kinsta.com/knowledgebase/401-error/