Nginx怎么解决history模式下页面刷新404问题


这篇文章主要介绍“Nginx怎么解决history模式下页面刷新404问题”,在日常操作中,相信很多人在Nginx怎么解决history模式下页面刷新404问题问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Nginx怎么解决history模式下页面刷新404问题”的免费云主机域名疑惑有所帮助!接下来,请跟着小编一起来学习吧!单页应用(SPA – single page application)
只在第一次加载页面时,返回唯一的html页面和它的公共静态资源,后续的页面跳转都不会从服务端拿html文件。(hash和history路由实现浏览器url变化而不刷新页面)hash路由
例子:www.baidu.com/#/home, 原本hash是用来结合锚点实现页面试图的控制,当#后面的值发生改变时不会重新请求页面,主要通过window的onhashchange方法来实现。history路由
相比于hash路由,最直观的变化就是路由中没有#,通过调用window.history对象上的一系列方法来实现页面的无刷新跳转(pushState、replaceState)。history模式下,因为url改变了,此时如果手动刷新页面,浏览器认为是请求一个新的页面(发起新的Http请求),而新的页面是不存在的(后端未配置的话),导致404。先简述一下在浏览器上输入IP或域名后发生的事情(有点面试题的味道了嗷????),按下回车之后,浏览器发出的http去请求html文件,在通过一系列的转发和寻址解析后,被目标IP所在服务器上的80端口(默认)接收,这个时候,问题来了哈,服务器的80接口拿到Http请求后,它不知道要去返回什么,这个时候就需要Nginx进行静态资源代理,告诉服务器返回什么静态文件对于一般的项目部署,我们需要处理nginx.conf配置文件
该文件,需要知道的如下语法=:表示精确匹配~:表示区分大小写正则匹配~*:表示不区分大小写正则匹配^~:表示 URI 以某个常规字符串开头!~:表示区分大小写正则不匹配!~*:表示不区分大小写正则不匹配/:通用匹配,任何请求都会匹配到两者区别在于 nginx 如何解释 location 后面的 url[root]
语法:root path
默认值:root html
配置段:http、server、location、if
处理结果:root 路径+ location 路径[alias]
语法:alias path
配置段:location
处理结果:使用 alias 路径替换 location 路径由上面的知识可以知道,刷新后,浏览器根据当前的url去请求html文件,但是SPA只有一个html文件,所以需要在nginx.conf的对应location里配置一行代码 try_files $uri $uri/ /index.html; 告诉nginx如果按顺序检查文件是否存在,若不存在则重定向到index.html文件到此,关于“Nginx怎么解决history模式下页面刷新404问题”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注百云主机网站,小编会继续努力为大家带来更多实用的文章!

相关推荐: 处理web前端异常的方式有哪些

这篇文章主要介绍了处理web前端异常的方式有哪些的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇处理web前端异常的方式有哪些文章都会有所收获,下面我们一起来看看吧。1、未雨绸缪,尽早发现问题2、让异常变得可控,避免影响呈现结果3、…

免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。

Like (0)
Donate 微信扫一扫 微信扫一扫
Previous 05/09 18:17
Next 05/09 18:17

相关推荐