06. vue history模式刷新后页面白屏、401、404的问题

先来看404的问题

vue项目使用history路由模式，页面刷新后出现白屏无内容显示、401、404等问题。首先来看两种路由模式的区别：

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

两者的区别主要为：

1. 路由格式上。hash模式通过#将路由分开，history模式没有；
2. 服务访问。hash模式不需要服务器配置，可以直接访问，且不会报错；而history需要在服务器端有相关的配置，否则会出现刷404、401等问题。

系统最开始使用的hash模式，后改为history模式后，刷新出现404，所以，对nginx配置进行了修改，配置内容如下：

    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;
        }
    }

404的意思就是说找不到界面，所以在访问到静态文件的部署目录时，通过try_files $uri $uri/ /portal/admin-console/index.html;，定位到/portal/admin-console/目录下的index.html文件，这时候，访问就不会404了。

如果是hash模式，就不需要这些配置。所以，如果想着方便的话，可以直接选择使用hash模式，而不是history模式。

当然，hash模式和history模式还有一些其它的区别，可以了解完之后再做结论。

下面来聊聊401的问题

401的报错一般都是net::ERR_ABORTED 401，访问错误的连接就会发现，报错信息状态是：UNAUTHORIZED

但是，导致401的原因有好几种，一般包括：

1. Outdated Browser Cache and Cookies，浏览器缓存或Cookies过期
2. Plugin Incompatibility，不兼容问题导致
3. Incorrect URL or Outdated Link，访问连接错误，这个可能的出现概率较大

怎么去修复它呢？

1. Look for Errors in the URL，检查是否有访问路径错误（我此次问题就是因为访问路径大小写写错…）
2. Clear Your Browser’s Cache，清缓存
3. Flush Your DNS，刷新DNS缓存。很少出现，在以上1、2都不行的时候，可以尝试
4. Deactivate Your WordPress Plugins，停用WordPress Plugins，很少用吧…
5. Check the WWW-Authenticate Header Response，检查WWW-Authenticate响应头

以上，便基本能够修复401的问题。解决方案完整内容来自https://kinsta.com/knowledgebase/401-error/