Nginx 404错误页面跳转实战（Tomcat、Vue、PHP）

2019年5月31日17:01:01 发表评论 2,288 views

一、Tomcat添加 404 跳转配置
二、通过Nginx 进行404跳转

今天公司内容开发一套Vue的项目，在打包发布到Tomcat上，访问成功，但是刷新页面后出现 404。
在网上查找了一下，原来是HTML5 History 模式引发的问题，具体为什么，vue官方已经给出了解释，

HTML5 History 问题官方解释

但是看完之后，懵逼了，没找到nginx+tomcat 怎么处理啊！！！！！

结果就想通过nginx、或者Vue程序将404的页面，跳转到index.html页面上，巧妙的避开坑，但出现了error错误不生效的问题，又是一顿google，哈哈浪费时间了，最后才搞定。

发现学会提问，才是自己学习的方向

一、Tomcat添加 404 跳转配置

解决方法原理：你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

cd /data/tomcat-wap/webapps/ROOT/
mkdir WEB-INF

在打包好的项目根目录下新建一个WEB-INF文件夹，在WEB-INF中写一个web.xml。

cat web.xml 
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
                      http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
    version="3.1" metadata-complete="true">
    <display-name>Router for Tomcat</display-name>
    <error-page>
        <error-code>404</error-code>
        <location>/index.html</location>
    </error-page>
</web-app>

这样的目的就是一旦出现404就返回到 index.html 页面。

二、通过Nginx 进行404跳转

这个我在之前的文章中有提到过，这里只是简单举例，帮大家回顾，还有写注意点
通过我们的架构 Nginx+php 或者 Nginx+Tomcat，所以我们今天已它2为例；

2.1 如果后端是php解析动态数据

修改配置文件 conf/nginx.conf ,添加页面重定向，在 http 内添加一行；

fastcgi_intercept_errors on;  #开启404错误页面自定义功能

1、官网推荐

location / {
　　root   /usr/share/nginx/html;
　　index  index.html index.htm;
　　try_files $uri $uri/ /index.html; #这是一个标准的跳转规则

2、匹配error_page

location /{
　　root   /usr/share/nginx/html;
　　index  index.html index.htm;
　　error_page 404 /index.html;  #404 跳转到根目录下index.html，看看有没有这个文件
}

2.2 如果后端是Tomcat 解析动态数据

在 server/location 内开启以下变量，我们才能自定义错误页面

proxy_intercept_errors on;

测试nginx配置文件

upstream wap {
        server 192.168.15.143:708;  #测试服务器项目的ip+端口
}
server {
        listen 8888;
        server_name qiuyuetao.com;
        location / {
        proxy_intercept_errors on;    #开启自定义错误页面
        proxy_pass       http://wap;
        proxy_set_header Host        $host;
        proxy_set_header X-Forwarded-For $remote_addr ;
        client_max_body_size    50m;
        error_page  404    /index.html;   #指定跳转页面，也可以写域名
        }
}

测试环境nginx主配置文件

user www www;
worker_processes auto;

error_log /data/wwwlogs/error_nginx.log crit;
pid /var/run/nginx.pid;
worker_rlimit_nofile 51200;

events {
  use epoll;
  worker_connections 51200;
  multi_accept on;
}

http {
  include mime.types;
  default_type application/octet-stream;
  server_names_hash_bucket_size 128;
  client_header_buffer_size 32k;
  large_client_header_buffers 4 32k;
  client_max_body_size 1024m;
  client_body_buffer_size 10m;
  sendfile on;
  tcp_nopush on;
  keepalive_timeout 120;
  server_tokens off;
  tcp_nodelay on;

  fastcgi_connect_timeout 300;
  fastcgi_send_timeout 300;
  fastcgi_read_timeout 300;
  fastcgi_buffer_size 64k;
  fastcgi_buffers 4 64k;
  fastcgi_busy_buffers_size 128k;
  fastcgi_temp_file_write_size 128k;
  fastcgi_intercept_errors on;

  #Gzip Compression
  gzip on;
  gzip_buffers 16 8k;
  gzip_comp_level 6;
  gzip_http_version 1.1;
  gzip_min_length 256;
  gzip_proxied any;
  gzip_vary on;
  gzip_types
    text/xml application/xml application/atom+xml application/rss+xml application/xhtml+xml image/svg+xml
    text/javascript application/javascript application/x-javascript
    text/x-json application/json application/x-web-app-manifest+json
    text/css text/plain text/x-component
    font/opentype application/x-font-ttf application/vnd.ms-fontobject
    image/x-icon;
  gzip_disable "MSIE [1-6]\.(?!.*SV1)";

######################## default ############################
server {
        listen 80 default; #禁止IP访问项目，只允许域名
        server_name _;
        return 500;
}
  server {
      listen 80 ;  
       server_name ck.fuqinjinrong.com;
    access_log /data/wwwlogs/access_nginx.log combined;
    root /home/webdata/ck.yilonghc.com;
    index index.html index.htm index.php;
    error_page 404 https://www.dgstack.cn/;  #自定义404错误，到指定域名
    #error_page 502 /502.html;
    location /nginx_status {
      stub_status on;
      access_log off;
      allow 127.0.0.1;
      deny all;
    }
    location ~ [^/]\.php(/|$) {
      #fastcgi_pass remote_php_ip:9000;
      fastcgi_pass unix:/dev/shm/php-cgi.sock;
      fastcgi_index index.php;
      include fastcgi.conf;
    }
    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|flv|mp4|ico)$ {
      expires 30d;
      access_log off;
    }
    location ~ .*\.(js|css)?$ {
      expires 7d;
      access_log off;
    }
    location ~ ^/(\.user.ini|\.ht|\.git|\.svn|\.project|LICENSE|README.md) {
      deny all;
    }
  }
########################## vhost #############################
  include vhost/*.conf;
}

跳转验证结果：