devServer中的historyApiFallback说明

最新推荐文章于 2024-05-15 01:17:05 发布

engineer_why

最新推荐文章于 2024-05-15 01:17:05 发布

阅读量1.4k

点赞数 1

文章标签：前端 javascript 开发语言

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/engineer_why/article/details/130815328

版权

historyApiFallback配置为true时，浏览器找不到对应页面会加载index.html，前端处理路由；若设置重定向，刷新后若后端无对应接口会返回404。当配置为false，直接返回404错误。

摘要由CSDN通过智能技术生成

historyApiFallback说明

① 在historyApiFallback:true的情况下

当在浏览器中输入地址，找不到对应的页面或服务时，会直接将index.html页面渲染出来。

若设置了重定向，此时页面会进行跳转到重定向页面,在前端会进行匹配对应的页面或组件，然后将其渲染到页面上。
此时如果我们刷新页面的话，浏览器会发送新的请求（根据重定向的地址）,如果后端服务器没有对应的接口，此时会返回404。

因为我们并没有对应的接口或文件页面，第一次访问，是因为webpack中的historyApiFallback为true，自动帮我们将指定的页面或默认的页面进行了渲染，当再次发送时，会重新对服务端进行请求，在找不到接口与服务的情况，页面显示404

② 在historyApiFallback:false的情况下

若访问的地址不存在，会直接返回404

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

博客等级

码龄4年

10
原创

32
点赞

92
收藏

173
粉丝

关注

私信

热门文章

分类专栏

vue项目问题集 2篇
JavaScript学习 7篇

最新评论

devServer中的historyApiFallback说明
CSDN-Ada助手: 恭喜您写了第八篇博客，内容涉及到devServer中的historyApiFallback，非常实用。希望您能继续保持创作的热情，并分享更多有价值的知识和经验。下一步的创作建议是可以写一些实战经验，分享一些遇到的问题和解决方法，这样可以更加贴近读者的需求。再次感谢您的分享！ CSDN 会根据你创作的博客的质量，给予优秀的博主博客红包奖励。请关注 https://bbs.csdn.net/forums/csdnnews?typeId=116148&utm_source=csdn_ai_ada_blog_reply8 看奖励名单。
devServer中的historyApiFallback说明
CSDN-Ada助手: 非常感谢用户的持续创作，第8篇博客对于devServer中的historyApiFallback的说明非常有价值。希望用户能够继续分享更多关于前端开发的经验和技巧，让更多的开发者受益。下一步的创作建议可以考虑分享一下如何在React中使用historyApiFallback来优化路由跳转体验，相信会有很多人对此感兴趣。再次感谢用户的分享。 CSDN 会根据你创作的博客的质量，给予优秀的博主博客红包奖励。请关注 https://bbs.csdn.net/forums/csdnnews?typeId=116148&utm_source=csdn_ai_ada_blog_reply8 看奖励名单。
webpack中resolve.extensions 说明
CSDN-Ada助手: 恭喜用户写出了这篇关于webpack中resolve.extensions的博客，对于前端开发者来说，这是一个非常重要的知识点。建议用户在以后的创作中，可以尝试加入更多实践经验和案例分析，这样可以更好地帮助读者理解和应用相关知识。期待用户的下一篇精彩博客！ CSDN 会根据你创作的博客的质量，给予优秀的博主博客红包奖励。请关注 https://bbs.csdn.net/forums/csdnnews?typeId=116148&utm_source=csdn_ai_ada_blog_reply7 看奖励名单。
webpack中resolve.extensions 说明
CSDN-Ada助手: 恭喜您写出了这篇关于webpack中resolve.extensions的博客，这篇文章对于初学者来说非常有用。建议在您的下一篇博客中可以分享一下webpack的其他常见配置项，这样可以帮助更多的读者更好地了解和使用webpack。再次感谢您的分享！ CSDN 会根据你创作的博客的质量，给予优秀的博主博客红包奖励。请关注 https://bbs.csdn.net/forums/csdnnews?typeId=116148&utm_source=csdn_ai_ada_blog_reply7 看奖励名单。
Axios总结（个人留存）
CSDN-Ada助手: 一定要坚持创作更多高质量博客哦, 小小红包, 以资鼓励, 更多创作活动请看: 新星计划2023: https://marketing.csdn.net/p/1738cda78d47b2ebb920916aab7c3584?utm_source=csdn_ai_ada_redpacket 新星计划2023: https://marketing.csdn.net/p/1738cda78d47b2ebb920916aab7c3584?utm_source=csdn_ai_ada_redpacket 上传ChatGPT/计算机论文等资源，瓜分￥5000元现金: https://blog.csdn.net/VIP_Assistant/article/details/130196121?utm_source=csdn_ai_ada_redpacket 新人首创任务挑战赛: https://marketing.csdn.net/p/90a06697f3eae83aabea1e150f5be8a5?utm_source=csdn_ai_ada_redpacket Microsoft Edge功能测评！: https://activity.csdn.net/creatActivity?id=10403?utm_source=csdn_ai_ada_redpacket 生物识别技术能否成为应对安全挑战的绝佳选择？: https://activity.csdn.net/creatActivity?id=10411?utm_source=csdn_ai_ada_redpacket 应届生如何提高职场竞争力: https://activity.csdn.net/creatActivity?id=10409?utm_source=csdn_ai_ada_redpacket 讯飞星火大模型将超越chatgpt？: https://activity.csdn.net/creatActivity?id=10407?utm_source=csdn_ai_ada_redpacket 职场新人备忘录: https://activity.csdn.net/creatActivity?id=10405?utm_source=csdn_ai_ada_redpacket VR vs AR：哪种技术更有潜力改变未来？: https://activity.csdn.net/creatActivity?id=10399?utm_source=csdn_ai_ada_redpacket “裸奔”时代下该如何保护网络隐私: https://activity.csdn.net/creatActivity?id=10401?utm_source=csdn_ai_ada_redpacket 蓝桥杯备赛指南分享: https://activity.csdn.net/creatActivity?id=10317?utm_source=csdn_ai_ada_redpacket 有哪些工具软件是一旦用了就离不开的？: https://activity.csdn.net/creatActivity?id=10397?utm_source=csdn_ai_ada_redpacket 量子计算：下一个大风口，还是一个热炒概念？: https://activity.csdn.net/creatActivity?id=10395?utm_source=csdn_ai_ada_redpacket

最新文章

目录

评论 2

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

打赏作者

engineer_why 你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20

扫码支付：¥1

获取中

扫码支付

您的余额不足，请更换扫码支付或充值

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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