Nginx 404错误页面跳转实战(Tomcat、Vue、PHP)

2019年5月31日17:01:01 发表评论 156 views

今天公司内容开发一套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;
}

跳转验证结果:
Nginx 404错误页面跳转实战(Tomcat、Vue、PHP)

  • QQ精品交流群
  • weinxin
  • 微信公众号
  • weinxin
admin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: