Nginx解决history模式下页面刷新404问题示例

目录
  • 前置知识
  • Nginx
  • location
    • 常用匹配规则
  • root 与 alias
    • 解决刷新后出现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或域名后发生的事情（有点面试题的味道了嗷

赞 (0)

相关推荐

  • Nginx报404错误的详细解决方法

    Nginx报404错误的详细解决方法

    近日在部署项目时,出现了一些问题,如图 正常的登录界面是可以访问的,但是在登录之后访问之后的地址会报404错误,于是去查看是否配置有错误,但是查看之后发现,nginx.conf与config.js两个配置文件的ip和端口都是没有错误的 这个项目部署过好多次,没有出现过这样的错误. 这是原版没动过的解压缩后的nginx.conf的源文件 圈起来的地方是应该按照项目配置对应的ip和监听的端口 listen对应的是端口,server_name对应的是访问的ip 但是这样是不能解决问题,我们需要添加如下

  • 在nginx上部署vue项目(history模式)的方法

    vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想hash这种以#号结尾的路径时候的话,我们可以使用路由的history的模式.比如如下网址: 使用hash模式的话,那么访问变成 http://localhost:8080/bank/page/count/#/ 这样的访问,如果路由使用 history的话,那么访问的路径变成 如下: http://localhost:8080/bank/page/count

  • 详解nginx配置vue h5 history去除#号

    vue的默认配置是使用hash模式,这样我们访问的时候都带有了一个#号,再支付回调的地址或者其他原因不支持#号或者不喜欢#号这种模式,优势就出现了需要去除#号,于是vue端就需要配置该模式,并且使用懒加载,vue端的配置如下: 首先先声明一下,这是使用vue+nginx实现前后端分离的项目,并且使用vue axios实现代理功能(允许跨域并且服务端已经开启跨域), 然后就是打包的配置: !!!注意,这里配置的assetsPublicPath一定要配置成  "/"  而不是  "

  • 针对Vue路由history模式下Nginx后台配置操作

    前端将vue路由模式改为history模式后需要运维配置才能正常访问,配置信如下 location / { root html; index index.html index.htm; try_files $uri $uri/ @rewrites; } location @rewrites { rewrite ^(.+)$ /index.html last; } 经测试,可以正常访问 补充知识:Vue History 模式下 整合Nginx部署踩坑过程 在公司部署Vue项目期间,因Vue的Rou

  • nginx刷新页面出现404解决方案(亲测有效)

    目录 方法一 方法二 方法一 最为简单的,将router设置为hash模式!!!history模式的路由需要后端配置,hash模式便不需要,不同的框架所需不一样,看对应的文档. 方法二 找到nginx配置代码,进行修改,网上很多都是如下类型的代码 location ^~ /api { proxy_connect_timeout 600; proxy_read_timeout 600; proxy_set_header x-real-ip $remote_addr; proxy_set_heade

  • Nginx图片服务器配置之后图片访问404的问题解决

    Nginx图片服务器配置之后图片访问404的问题解决

    我的错误配置是: 服务器文件根地址: 想通过浏览器输入这个地址访问到图片: 但是会发现文件找不到会一直404,原因是根路径配置错误,来看下root路径原理: root 配置的意思是,会在root配置的目录后跟上URL,组成对应的文件路径. 意思就是我们在浏览器输入的这个地址实际访问的是 /home/ftpuser/images/images/~~~ 会把我们的location后面的 /images拼到实际访问的路径之后 处理方法有两种任选其一: 1.处理方法是把root后面的images去掉,如

  • 解决Nginx 配置 proxy_pass 后 返回404问题

    解决Nginx 配置 proxy_pass 后 返回404问题

    一. Nginx 配置 proxy_pass 后 返回404问题 故障解决和定位 1.1. 问题 在一次生产涉及多次转发的配置中, 需求是下面的图: 在配置好了 proxy_pass 之后,请求 www.djx.com 直接返回 404,没有什么其他的异常. 但是我们直接请求后端 www.baidu.com 是正常响应的.这就很怪异的. 看日志请求也是转发到了 www.baidu.com 的.但是请求响应就是404. 1.2. 寻找问题原因 我们的默认的 Nginx的 proxy_set_hea

  • Nginx解决history模式下页面刷新404问题示例

    目录 前置知识 Nginx location 常用匹配规则 root 与 alias 解决刷新后出现404的问题 总结 前置知识 单页应用(SPA - single page application)只在第一次加载页面时,返回唯一的html页面和它的公共静态资源,后续的页面跳转都不会从服务端拿html文件.(hash和history路由实现浏览器url变化而不刷新页面) hash路由例子:www.baidu.com/#/home, 原本hash是用来结合锚点实现页面试图的控制,当#后面的值发生改

  • vue路由history模式页面刷新404解决方法Koa Express

    目录 为什页面刷新会出现404 Node服务使用Koa框架 Node服务使用Express框架 为什页面刷新会出现404 因为vue项目中路由hash模式改为了history模式,由于hash模式时url带的#号后面是哈希值不会作为url的一部分发送给服务器,而history模式下当刷新页面之后浏览器会直接去请求服务器,而服务器没有这个路由,于是就出现404. 那为什么页面跳转就是正常的?跳转时其实不是通过请求服务器的,而是通过js操作history的API改变地址完成的. 建议:非C端系统可以

  • vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法

    vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法

    解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题,具体内容如下 一. 异常描述 本来使用的是vue-router的hash模式,但是hash模式下url需要带"#"符号,不仅看起来不舒服,而且有些场景下是会破坏路由中的"#"(微信分享页面就会把"#"后边的内容处理掉),所以就需要使用history模式,然后就让后端改下nginx配置: location / { try_files $uri $uri/ /in

  • VUE的history模式下除了index外其他路由404报错解决办法

    我们先来看下代码: location / { index index.html; root /dist; try_files $uri $uri/ /index.html; } try_files首先会判断他是文件,还是一个目录,结果发现他是文件,与第一个参数 $uri变量匹配. 然后去到网站目录下去查找文件是否存在,如果存在直接读取返回.如果不存在直接跳转到第三个参数. 现在不明白的是既然跳到了index为什么显示的还是路由后的界面 内容扩展: 问题背景: vue-router 默认是hash

  • 解决vue打包项目后刷新404的问题

    vue打包项目后刷新404的问题Nginx配置 server { listen 80; server_name localhost; index index.html; root /root/dist; location / { root /root/dist; try_files $uri $uri/ /index.html =404; } } 以上这篇解决vue打包项目后刷新404的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vu

  • vue 基于abstract 路由模式 实现页面内嵌的示例代码

    vue 基于abstract 路由模式 实现页面内嵌的示例代码

    abstract 路由模式 abstract 是vue路由中的第三种模式,本身是用来在不支持浏览器API的环境中,充当fallback,而不论是hash还是history模式都会对浏览器上的url产生作用,本文要实现的功能就是在已存在的路由页面中内嵌其他的路由页面,而保持在浏览器当中依旧显示当前页面的路由path,这就利用到了abstract这种与浏览器分离的路由模式. 路由示例 export const routes = [ { path: "/", redirect: "

  • vue项目history模式下部署子路由跳转失败的解决

    vue项目history模式下部署子路由跳转失败的解决

    目录 history模式下子路由跳转失败 使用history跳转路由不能跳转 history模式下子路由跳转失败 问题描述:只有部分路由跳转正常刷新也不会白屏,部分路由出现跳转正常,刷新却白屏.部分路由无法跳转.刷新报错如下图同时页面白屏 解决办法: 1.vue.config.js中publicPath设置为"/"而非"./": 2.vue路由配置base:process.env.BASE_URL: 3.nginx下配置 location / {         a

  • vue-router启用history模式下的开发及非根目录部署方法

     为什么要有 hash 和 history 对于 Vue 这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义.前端路由的核心,就在于 -- 改变视图的同时不会向后端发出请求. 为了达到这一目的,浏览器当前提供了以下两种支持: 1.hash -- 即地址栏 URL 中的 # 符号(此 hash 不是密码学里的散列运算). 比如这个 URL:http://www.abc.com/#/hello,hash 的值为 #/hello.它

  • Vue项目history模式下微信分享爬坑总结

    每回遇到微信分享都是一个坑,目前的商城项目使用Vue开发,采用history的路由模式,配置微信分享又遇到了很多问题,最后终于解决了,现将解决的过程分享一下. 技术要点 Vue,history 常见问题及说明 debug模式下报false 这个没得说,就是调用wx.config方法的参数错误造成的,请确认以下事项: 是否成功绑定了域名(域名校验文件要能被访问到) 使用最新的js-sdk文件,因为微信会改部分api config方法的参数是否传正确了(拼写错误.大小写...) 需要使用的方法是否写

随机推荐