nginx部署后刷新页面404问题之historyApiFallback

最新推荐文章于 2022-08-09 14:01:29 发布
最新推荐文章于 2022-08-09 14:01:29 发布
阅读量2.9k 收藏 1
点赞数
分类专栏： nginx 文章标签： 面试 职场和发展 webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/imber___zsk/article/details/121659695
版权

historyApiFallback

主要作用是解决SPA页面在路由跳转后，进行页面刷新时，返回404的错误

webpakc默认配置了historyApiFallback为true、功能是通过connect-history-api-fallback库实现的

location / {
    root /...
    # vue工程的路由是history模式
    try_files $uri $uri/ /index.html;
    index index.html index.html
}

源码

位置：node_modules/@vue/cli-service/lib/commands/serve.js(172行)

const server = new WebpackDevServer(compiler,Object.assign({
	...
    historyApiFallback:{
        disableDotRule:true,//这个地方开启historyApiFallback
        rewrites:...
    }
    ...
}))
前端imber
关注
专栏目录
history模式前端路由部署后访问/刷新页面404问题
Holly1945的博客
12-17 4392
前端路由 实际是路由与组件的映射表 访问任何路径，服务器只需要响应index.html （单页面应用） 浏览器根据不同路由 匹配要渲染的内容 刷新操作时候： 浏览器会带着地址栏路由请求服务器返回相应地静态资源 如果没有找到对应的资源 返回 404 配置nginx: location / { root /... # vue工程的路由是history模式 try_files $uri $uri/ /index.html; // ** 重点加上这个配置 index index.h
nginx常见典型故障
executive
10-23 1721
nginx常见典型故障 1.为什么nginx里面有的是浏览器渲染出的页面，有的时候就变成下载文件？ 这个一个取决于服务端nginx，一个取决于你浏览器。在Nginx服务端的配置文件目录下，有一个mime.types 文件，内容如下 types { text/html html htm shtml; text/css ...
history api
weixin_41042671的博客
03-30 331
history.pushState(state,null,url);window.onpopstate = function(event){ event.state}html5 history api 栗子：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>&..
connect-history-api-fallback node开发之
zhanglongdream的博客
06-13 1716
history使用的是html5的history  api 具体的使用场景就是用户刷新页面的时候我们保存用户的状态  在单页面中
Nginx反向代理
weixin_34309543的博客
03-29 163
关于反向代理 Nginx能够作为一个反向代理来终结来自客户端的请求，并且向上游服务器打开一个新连接。新连接代表客户端向上游服务器发送请求。代理到上游服务器的配置中，最重要的是proxy_pass指令。该指令有一个参数，URL请求将会被转换，带有URI部分的proxy_pass指令将会使用该URI代替客户端request_uri部分。location/uri{ ...
history模式下Nginx后台配置
weixin_43660626的博客
06-14 1356
网上搜了很多相关文章，但是发现页面可以请求下来，图片和css样式表无法加载。于是采取下面方案： location / { root html; index index.html index.htm; try_files $uri $uri/ @rewrites; } location @...
react-router browserHistory刷新页面404问题解决方法
11-28
总的来说，解决`react-router browserHistory`刷新页面404问题的关键在于让服务器能够正确处理所有路由请求，无论它们是否对应实际的静态文件。通过配置`webpack-dev-server`的`historyApiFallback`或在生产环境中...
解决生产环境history路由刷新404问题
fxxkingpineapple的博客
03-28 3413
服务器为nodejs+express使用connect-history-api-fallback中间件解决，react和vue都是一样的。 安装connect-history-api-fallback npm install --save connect-history-api-fallback 引入并使用 var express = require('express'); var path = require('path'); var history = require('connect-hi
nginx配合react-router、webpack打包实现二级目录访问
gairuichan的博客
07-16 2103
背景：由于域名有限，默认情况下使用webpack打包会占用根目录，导致无法部署其他项目，所以需要配置通过二级目录访问 webpack配置 // webpack.prod.js生产环境配置 module.exports = { .... output:{ filename: '[name].bundle.js', path: path.join(__dirname, 'build'), //和服务器二级目录的文件名称必须一致, 前后的/一定要有
Vue项目打包部署 history
09-08
Vue.js项目部署时使用`history`模式主要是为了实现单页应用（SPA）的无刷新导航。`history`模式允许前端直接操作URL，而不涉及服务器端路由。在Vue项目中配置`history`部署通常需要以下几个步骤： 1. **设置...
Nginx反向代理及负载均衡
weixin_33937499的博客
04-06 105
反向代理(Reverse Proxy): 是指代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将服务器得到的结果返回给internet上请求连接的客户端; 基本的反向代理: location [option] URI { proxy_pass http://192.168.122.1/; } 其中 option 包括: = 路径精确匹配,只包含当前...
使用nginx error_page 对404 文件做冗余
weixin_34220963的博客
11-09 248
使用nginx error_page 对404 文件做冗余源由：多个图片服务器图片有差异，可能会出现访问某一台服务器出现404，现在需要不管怎样访问都能访问到。思路：打算使用下面三个方法，由于时间太短方法1应该可行但是没时间，方法2简单的测试下没有通过，方法3成了唯一选择查了多方资料才搞定，发现网上很多资料不全，按照配置应该不能出现意料的结果，现在总结如下。后续：后续看效果，...
nginx配置vue的History 模式
李青林的博客
05-29 963
location / { index index.html index.htm; try_files $uri $uri/ @fallback; add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET, POST.
使用HTML5的History API
mmjinglin的博客
01-24 931
HTML5 History API提供了一种功能，能让开发人员在不刷新整个页面的情况下修改站点的URL。这个功能很有用，例如通过一段JavaScript代码局部加载页面的内容，你希望通过改变当前页面的URL来反应出页面内容的变化，这时该功能可以派上用场。 举个例子，当用户从首页进入帮助页面时，我们通过Ajax来加载帮助页面的内容。然后这个用户又转到产品页面，我们需要再一次通过Ajax请求来替换页面...
Nginx 关于 location 的匹配规则详解
07-30 3028
Nginx 关于 location 的匹配规则详解 http://iteye.com/eyesmore/ 有些童鞋的误区 1、 location 的匹配顺序是“先匹配正则，再匹配普通”。 矫正： location 的匹配顺序其实是“先匹配普通，再匹配正则”。我这么说，大家一定会反驳我，因为按“先匹配普通，再匹配正则”解释不了大家平时习惯的按“先匹配正则，再匹配普通”的实践经
webpack高级运用，historyApiFallback（解决history，h5路由，方式刷新页面可能会报错），output中添加publicPath（公共路径）任意找不到的路径都会去访问/等等
差不少的博客
08-09 2665
webpack高级运用，historyApiFallback（解决history，h5路由，方式刷新页面可能会报错），output中添加publicPath（公共路径）任意找不到的路径都会去访问/等等
结合nginx源码学习error_page和proxy 指令的关系
qq_40907977的博客
12-11 362
▌proxy_intercept_errors 当上游服务器响应头回来后，可以根据响应状态码的值进行拦截错误处理，与error_page 指令相互结合。用在访问上游服务器出现错误的情况下。 服务部署情况 一、主服务（nginx:80) ， /usr/local/nginx/sbin/nginx 二、上游服务(nginx:8012)， /usr/local/nginx_8012/nginx 上游服务...
【转】Nginx 常用配置
10-18 243
文章目录nginx 之 proxy_pass详解nginx部署前端SPA应用实践nginx location 匹配规则browserHistory 模式的刷新问题多个SPA的部署与重定向开启gzip nginx 之 proxy_pass详解 原文地址 在nginx中配置proxy_pass代理转发时，如果在proxy_pass后面的url加/，表示绝对根路径；如果没有/，表示相对路径，把匹配的路径...
vue中的historyApiFallback详解
weixin_47450807的博客
02-24 5865
本篇博客主要是详细总结一下vue中的historyApiFallback的作用。 当我们在浏览器中输入一个网址(比如说是：http://www.edit.com),此时会经过dns解析，拿到ip地址然后根据ip地址向该服务器发起请求，服务器接受到请求之后，然后返回相应的结果(html,css,js)。如果我们在前端设置了重定向，此时页面会进行跳转到http://www.edit.com/home,在前端会进行匹配对应的组件然后将其渲染到页面上。此时如果我们刷新页面的话，浏览器会发送新的请求http://ww
vite部署到nginx后刷新页面404
最新发布
10-13
当你将Vite项目部署到Nginx服务器并遇到页面刷新404错误时，这通常是因为Nginx配置未正确设置动态内容路径或者是Vite的静态文件URL处理不当。以下是可能的原因和解决步骤： 1. **Vue单页应用配置**： - Vite默认生成的是静态站点，所以你需要告诉Nginx如何解析动态请求。检查你的`nginx.conf`中的`try_files`指令，应该指向你的Vite构建后的目录，例如： ```bash location / { try_files $uri $uri/ /index.html =404; } ``` 2. **Vite devServer的部署模式**： - 如果你使用了Vite的`--preview`或`--host`选项部署到本地，需要确保Nginx正确转发请求。确保Vite devServer的`host`设置与Nginx监听的地址一致。 3. **Nginx代理配置**： - 如果你的应用运行在非根路径（如"/app"），你需要添加反向代理规则。例如： ```nginx server { listen 80; location /app { proxy_pass http://localhost:3000; # Vite devServer端口 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } } ``` 4. **检查URL重写规则**： - 检查是否有不必要的URL重写，确保浏览器访问的URL可以直接匹配到Vite项目的资源。 5. **清除缓存**： - 清除浏览器缓存，并尝试通过控制台的开发者工具查看网络请求是否正确。 如果以上步骤都确认无误，还是存在问题，试着提供更多的上下文信息以便更精确地定位问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值