nginx中文文档:http://www.nginx.cn/doc/
nginx官网:http://nginx.org/en/docs/
Nginx开发从入门到精通:http://tengine.taobao.org/book/index.html
1、问题现象?
答:在浏览器中直接访问www.xxx.com会正常显示页面,先访问www.xxx.com后再点“demo" 跳转到www.lyy.com/demo是正常显示demo页面的。这时在此页面f5”刷新“就会出现 404了。
2、分析出现404现象的原因?
答:这是web单页面开发模式造成的。现在主流的前端框架基本都是单页面的。如:react、vue等。
单页面简单来说就是访问所有资源路径、其实页面内容只有一个(一般是index.html)。这个页面中引入的js框架会根据当前访问的url去路由到相应的子页面组件(可以理解为页面片段)进行逻辑处理和页面渲染。
然而当你访问www.xxx.com/demo其实web站中并没demo这个页面的资源(demo只是给js框架路由用的)。所以就报404啦!
3、怎么解决这个问题,才能不让他404,又能让js框架正确路由呢?
答:分析出产生问题的原因就很好解决这个问题了。
解决:满足以下两点就行:
1.刷新时要保证url路径不变。即不能用重定向去访问index.html,因为url会变。变了js框架就没法路由,因为不知道你上次是哪个url了。
2.服务器响应的内容一定要是index.html,因为index.html这里加载了js框架和初始化一些东西。
具体做法:用nginx配置,不改变url的情况下响应index.html资源的内容。
location /demo {
rewrite /index.html break;
root 根路径;
}
location /static {
alias 根路径/static;
index index.html;
}
这里有个很重要的点:break
break 并不是重定向说告诉浏览器你重新去访问index.html。而是说内部去找 /index.html页面。去root对应的目录下找。找到就返回页面内容。这样就保证了在url不变的情况下固定返回index.html内容。如果在root对应的目录中没找到index.html就会404了。和break 同级的命令lest,才是让浏览器重定向的,即是重新发出请求。