Nginx中404页面的配置及AJAX请求返回404页面的方法

404页面基础配置
404错误是WWW网站访问容易出现的错误。最常见的出错提示：404 NOT FOUND。404错误页的设置对网站SEO有很大的影响，而设置不当，比如直接转跳主页等，会被搜索引擎降权拔毛。404页面的目的应该是告诉用户：你所请求的页面是不存在的，同时引导用户浏览网站其他页面而不是关掉窗口离去。搜索引擎通过HTTP状态码来识别网页的状态。当搜索引擎获得了一个错误链接时，网站应该返回404状态码，告诉搜索引擎放弃对该链接的索引。而如果返回200或302状态码，搜索引擎就会为该链接建立索引，这导致大量不同的链接指向了相同的网页内容。结果是，搜索引擎对网站的信任度大幅降低。
下面是LNMP设置Nginx 404错误页教程：
1、

vi /usr/local/nginx/conf/nginx.conf

编辑Nginx配置文件，在http 区段添加下面代码：

fastcgi_intercept_errors on;

2、编辑网站配置文件，比如本站：

vi /usr/local/nginx/conf/vhost/onelone.com.conf

，在server 区段添加下面代码：

error_page 404 = /404.html;

注意：有网友测试上行代码需要去掉等号才会返回正确的404状态，所以请同学们自行测试是否要去掉等号。

3、测试配置文件是否正确：

/usr/local/nginx/sbin/nginx -t

，返回下面代码通过：

the configuration file /usr/local/nginx/conf/nginx.conf syntax is ok
configuration file /usr/local/nginx/conf/nginx.conf test is successful

4、重启LNMP生效：/root/lnmp restart 。

5、404错误页面制作的注意事项：
（1）不要将404错误转向到网站主页，否则可能会导致主页在搜索引擎中被降权或消失。 　　
（2）不要使用绝对URL，如果使用绝对URL返回的状态码是302+200，这样会产生大量的重复网页。
（3）404页面设置完成，一定要检查是否正确。http头信息返回的一定要是404状态。这个可以通过服务器头部信息检查工具进行检查。
（4）404页面不要自动跳转，让用户来决定去向。
自定义的404页面必须大于512字节，否则可能会出现IE默认的404页面。

AJAX请求的404页面返回
前几天，一朋友出程序出问题却怎么查都没看出问题，于是让我帮它看看。其实它是ajax请求了很多个模板，然后把模板写到页面中。关键是所有请求的页面都是200正常状态码返回，表面上看没什么问题，实际上有些请求虽然返回200状态码，但给回的状态码是200。WebServer是nginx，直接告诉我应该他们配置了nginx的404错误页面，虽然请求不存在的资源可以成功返回404页面，但返回状态码确是200。

404.html
This is 404 page.

请求一个不存在的页面：

ajax Code:

$.ajax({
 url: "does_not_exist.html",
 success : function(Response, textStatus){
 console.log(textStatus+":"+Response);
 },
 error : function(XMLHttpRequest, textStatus, errorThrown){
 console.log([XMLHttpRequest, textStatus, errorThrown].join(","));
 }
});

执行结果：

进入Object看看详细：

找不到请求的页面并返回404页面信息，但状态码依然是200，所以jQuery没有走error函数回调而是直接走success回调了。
应该是配置写的有问题，于是打开nginx.conf，发现他们配置这么写：

error_page 404 = /404.html;

于是我查阅官网文档，把上面的表达式改写为：

error_page 404 /404.html;

然后重启

D:\nginx-1.5.11>nginx.exe -s reload

再来试试：

再来看看ajax请求的：

明显看到相比前面那条返回标红404状态码，下面console.log出来的是

[object Object],error,Not Found

然后点击进入Object看看：

status值是404。既实现返回404页面，又能返回404状态码让ajax请求能够根据状态码判断页面请求状况进行错误处理。

 下面是其它网友的补充：

一.Nginx错误页面优雅显示的原因？
当我们访问网站时，由于特殊的原因，经常会出现诸如403,404,503等错误，这极大的影响用户的访问体验，所以我们很有必要做一下错误页面的优雅显示，以提升用户的浏览体验。

二.Nginx下如何定义优雅显示的页面呢？
下面我们就以404错误为例，具体步骤如下：
1.创建自己的404.html页面，放在站点目录下面；
2.更改nginx.conf配置文件，在http模块中加入 fastcgi_intercept_errors on;
3.更改nginx.conf配置文件，在server模块中加入：error_page 404 /404.html; 或者 error_page 404 =http://www.hulala.com/404.html;
4.更改后检查语法/nginx/sbin/nginx -t ，并重启nginx;
现在，404错误的页面优雅显示已经配置OK了。

举一反三：502、403 等其他错误可以用同样的方法来配置。
error_page 500 502 503 504 /50x.html;
error_page 403 /403.html;
注意：
在nginx中错误重定向生效的两个前提条件是：设置了fastcgi_intercept_errors on,并且正确的设置了error_page这个选项。

赞 (0)

相关推荐

  • 为Nginx自定义404，502错误页面的方法

    首先打开nginx.conf文件,在fastcgi_temp_file_write_size 128k; 下面添加 fastcgi_intercept_errors on;注意,包括;号 然后在需要定义的站点的里面添加 error_page 404 = /404.htm;例如: 复制代码 代码如下: server { listen 80; server_name www.deepvps.com; index index.html index.htm index.php; error_page 4

  • Nginx实现404页面的方法小结

    第一种:Nginx自己的错误页面 Nginx访问一个静态的html 页面,当这个页面没有的时候,Nginx抛出404,那么如何返回给客户端404呢? 看下面的配置,这种情况下不需要修改任何参数,就能实现这个功能. server { listen 80; server_name www.test.com; root /var/www/test; index index.html index.htm; location / { } # 定义错误页面码,如果出现相应的错误页面码,转发到那里. erro

  • PHP统计nginx访问日志中的搜索引擎抓取404链接页面路径

    我在服务器上有每天切割nginx日志的习惯,所以针对每天各大搜索引擎来访,总能记录一些404页面信息,传统上我只是偶尔分析下日志,但是对于很多日志信息的朋友,人工来筛选可能不是一件容易的事情,这不我个人自己慢慢研究了一点点,针对谷歌.百度.搜搜.360搜索.宜搜.搜狗.必应等搜索引擎的404访问生成为一个txt文本文件,直接上代码test.php. 复制代码 代码如下: <?php //访问test.php?s=google $domain='http://www.jb51.net'; $spi

  • NGINX下配置404错误页面的方法分享

    1. 创建自己的404.html页面 2.更改nginx.conf在http定义区域加入: fastcgi_intercept_errors on; 3.更改nginx.conf(或单独网站配置文件,例如在nginx -> sites-enabled下的站点配置文件 ) 中在server 区域加入: error_page 404 = /404.html 或者 error_page 404 = http://www.xxx.com/404.html 4.更改后重启nginx,,测试nginx.co

  • Nginx中定义404页面并且返回404状态码的正确方法

    Nginx中定义404页面并且返回404状态码的正确方法

    前几天,一朋友出程序出问题却怎么查都没看出问题,于是让我帮它看看.其实它是ajax请求了很多个模板,然后把模板写到页面中.关键是所有请求的页面都是200正常状态码返回,表面上看没什么问题,实际上有些请求虽然返回200状态码,但给回的状态码是200.WebServer是nginx,直接告诉我应该他们配置了nginx的404错误页面,虽然请求不存在的资源可以成功返回404页面,但返回状态码确是200. 404.html 复制代码 代码如下: This is 404 page. 请求一个不存在的页面:

  • Nginx服务器中配置404错误页面时一些值得注意的地方

    换了VPS之后的某一天,在Google管理员工具控制台下看到了大量的"软404"错误,查找了一些资料之后发现是自己在Nginx下配置404页面的方法不对才导致了错误的产生,在此记录一下Nginx下正确的404页面配置方法. 404是一个相应代码,表示"页面无法找到"(Page Not Found),Google关于"软404"给出的说法是: 复制代码 代码如下: Instead of returning a 404 response code f

  • Nginx中404页面的配置及AJAX请求返回404页面的方法

    Nginx中404页面的配置及AJAX请求返回404页面的方法

    404页面基础配置 404错误是WWW网站访问容易出现的错误.最常见的出错提示:404 NOT FOUND.404错误页的设置对网站SEO有很大的影响,而设置不当,比如直接转跳主页等,会被搜索引擎降权拔毛.404页面的目的应该是告诉用户:你所请求的页面是不存在的,同时引导用户浏览网站其他页面而不是关掉窗口离去.搜索引擎通过HTTP状态码来识别网页的状态.当搜索引擎获得了一个错误链接时,网站应该返回404状态码,告诉搜索引擎放弃对该链接的索引.而如果返回200或302状态码,搜索引擎就会为该链接建

  • Nginx中的用户认证配置及阻止用户使用代理访问的方法

    Nginx中的用户认证配置及阻止用户使用代理访问的方法

    nginx用户认证配置( Basic HTTP authentication) ngx_http_auth_basic_module模块实现让访问着,只有输入正确的用户密码才允许访问web内容.web上的一些内容不想被其他人知道,但是又想让部分人看到.nginx的http auth模块以及Apache http auth都是很好的解决方案. 默认情况下nginx已经安装了ngx_http_auth_basic_module模块,如果不需要这个模块,可以加上 --without-http_auth

  • 通过Ajax请求动态填充页面数据的实例

    你可能得预先了解 实现功能:点击页面上的按钮实现动态追加数据 实现原理:点击页面按钮,通过Ajax提交请求到后台,后台接收请求后进行数据库操作,然后返回数据到前台并进行页面渲染 动态加载更多数据 代码实现 //1.页面布局 <div style="padding: 0 0 20px 0;"> <input type="hidden" class="tip" value="1"> <input st

  • 原生js jquery ajax请求以及jsonp的调用方法

    ajax 是用来处理前后端交互的技术,可以改善用户体验,其本质是 XMLHttpRequest,异步访问服务器并发送请求数据,服务器返回响应的数据,以页面无刷新的效果改变页面中的局部内容 同步:任务一个一个的执行,只有前面的任务执行完才会执行下一个任务,如果前面的任务是耗时操作,则需要一直等待 异步:多条任务并发执行,也就是一个任务的开启,不需要等待其他任务执行结束,效率较高 ajax的语言载体是JavaScript,最大的特点是页面不刷新 1.获取ajax对象 主流浏览器获取方式:火狐.谷歌.

  • 通过jquery的ajax请求本地的json文件方法

    自己学习jquery的ajax的经历,记录一下 ajaxTestDemo.html 在body里面放一个id为test的div <div id="test"></div> 第一步还是要先加载jquery文件 jquery.min.js <script> $(function(){ $.ajax({ //请求方式为get type:"GET", //json文件位置 url:"./data/shuju.json"

  • JS Ajax请求会话过期处理问题解决方法分析

    本文实例讲述了JS Ajax请求会话过期处理问题解决方法.分享给大家供大家参考,具体如下: 对于页面来说,处理session过期比较简单,一般只需在过滤器里面判断session用户是否存在,不存在则跳转页面到登陆页即可. 对于Ajax请求来说,这个办法则无效,只能获取到登录页的html代码.原因在于Ajax请求是XMLHTTPRequest对象发起的而不是浏览器,而服务器返回的信息接收者也是XMLHTTPRequest,非浏览器. 解决办法: 服务器端 可在返回的ResponseHeader里添

  • vue项目使用axios发送请求让ajax请求头部携带cookie的方法

    最近做vue项目时遇到登录权限问题,登录以后再发送的请求头部并没有携带登录后设置的cookie,导致后台无法校验其是否登录.检查发现是vue项目中使用axios发送ajax请求导致的.查看文档得知axios默认是不让ajax请求头部携带cookie的,因此,在main.js中设置如下: import axios from 'axios' axios.defaults.withCredentials=true;//让ajax携带cookie Vue.prototype.$axios = axios

  • jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签

    废话不多说了,直接给大家贴代码了,具体内容如下所示: // js <script type="text/javascript"> function myBtn_f() { var cnt = $('#myCnt').val(); syncAjax('myAjax.html', { 'cnt' : cnt }, function(result) { if (100 == result.statusCode) { var data = result.lst; var $d =

  • Nginx中的Gzip压缩配置介绍

    随着nginx的发展,越来越多的网站使用nginx,因此nginx的优化变得越来越重要,今天我们来看看nginx的gzip压缩到底是怎么压缩的呢? gzip(GNU- ZIP)是一种压缩技术.经过gzip压缩后页面大小可以变为原来的30%甚至更小,这样,用户浏览页面的时候速度会块得多.gzip的压缩页面需要浏览 器和服务器双方都支持,实际上就是服务器端压缩,传到浏览器后浏览器解压并解析.浏览器那里不需要我们担心,因为目前的巨大多数浏览器都支持解析gzip 过的页面. Nginx的压缩输出有一组g

  • Nginx中Location从零开始的配置教程

    基础知识 location的匹配顺序是"先匹配正则,在匹配普通". location的匹配顺序其实是"先匹配普通,在匹配正则".造成误解的原因是:正则匹配会覆盖普通匹配 Nginx location 配置语法 1. location [ = | ~ | ~* | ^~ ] uri { ... } 2. location @name { ... } location 配置可以有两种配置方法 1.前缀 + uri(字符串/正则表达式) 2.@ + name 前缀含义 =

随机推荐