【Angular】——路由之刷新报404

最新推荐文章于 2021-09-01 11:59:05 发布
最新推荐文章于 2021-09-01 11:59:05 发布
阅读量5.5k 收藏 4
点赞数 3
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/onlybymyself/article/details/72794619
当在Angular应用中遇到刷新导致404错误的问题，主要是因为刷新时浏览器直接请求后端，而未走前端路由。传统的解决方法是设置后端重定向，但这违背前后端分离原则。通过查阅资料，找到了前端解决方案：在app.module.ts中进行配置，确保刷新时仍走前端路由，从而避免404错误。

    项目进入测试期，发现了一个开发过程中没有发现的问题：发布后访问网站，使用过程一切正常：


    但只要刷新，就会：


      开始查了一些资料：大都是关于这样的说法：

最低0.47元/天 解锁文章

200万优质内容无限畅学
angular6页面刷新时报HTTP Status 404 – Not Found
盼盼盼的博客
05-14 1774
错误信息： HTTP Status 404 – Not Found Type Status Report Description The origin server did not find a current representation for the target resource or is not willing to disclose that one exists. Apache...
Angular基础教程+Demo项目——尽可能全面一些——第一节
Burnup_110的博客
11-21 2011
第二节预告：生命周期函数、Rxjs、数据请求、路由 学习过程中所写的Demo_GitHub——学习Angular——浅度学习Demo 官网：https://angular.cn/（官网是最好的老师哦，追求技术的大神可以继续深入啦） Angular前言（跳过即可，自勉而已） 一写博客，不例外的喜欢啰嗦一下，本人是广大java后端开发中的一员，但是因为工作需要不得不利用工作之余学习Angular前端，虽然我对于学习前端技术不反感，但是我更加信奉T型发展，先精后广，后端远远称不上精通，就要走广而多的路子了，就怕以
angularjs 刷新 404
renpinghao的专栏
07-15 3459
在项目根目录下，添加 .htaccess 文件。 文件内容为 RewriteEngine On Options FollowSymLinksRewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . index.html这是以apache作为服务器为例的。如果是nginx作为服务器，
angular路由跳转页面后刷新报404错误
xif3681的博客
09-25 2266
服务器环境: nginx    问题： 刷新请求页面时，nginx 等服务器会先于angular接管页面跳转，由于nginx并没有 angular里的路由，因此会报错。 解决： nginx 配置： try_files $uri $uri/ /index.html =404; #这里一定要设置 http://www.cnblogs.com/wawahaha/p/4641691.ht...
【angular】路由之刷新报404
FCat
10-31 2128
项目开发完成，build发布后，发现转到路由后刷新页面报错404解决方法： 找到项目中app.module.ts文件 增加红圈的内容 然后打包发布：ng build –prod –aot
Angular打包到tomcat后页面刷新404
aliaichidantong的博客
06-29 550
一、Angular项目打包后部署到tomcat下，刷新页面会报404的错误 原因是找不到地址，我的环境是用nginx代理之后的 网上找到2中解决方案，我用的第二种，第一种没测试 1、app.module.ts imports: [ RouterModule.forRoot(routers, {useHash: true}) ], 2、app.module.ts import { LocationStrategy, HashLocationStrategy } from '@angul
英雄之旅：Angular教程应用
02-12
**Angular教程应用——“英雄之旅”** Angular是一款强大的前端开发框架，由Google维护，用于构建交互式的单页应用程序（SPA）。这个“英雄之旅”是Angular官方提供的一个基础教程，旨在帮助初学者理解Angular的...
两天学会Angular开发——第二天
zhuzhiqiang_zhu的博客
08-15 293
Angular实战开发-第一节 项目地址：Github 搜索 zhuzhiqiang/douBanVideo 简述 在第一节中，我们把工程搭建好了，首页的分类也能展示。接下来我们要做的是： 点击每一个分类，去请求数据，展示 请求接口 请求接口的代码封装在 home.service.ts 文件中。使用的数据是 mock 数据，放在 mock-data 文件夹中，项目中用到的接口地址都放在 ma...
angularJS的两种路由ng-router和ui-router的差异
IT修真院：初学者转行到互联网的聚集地
05-17 4463
这里是修真院前端小课堂，每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能，本篇分享的是： 【angularJS的两种路由ng-router和ui-router的差异】 大家好，我是IT修真院深圳分院第07期学员，一枚正直善良的web程序员。 今天给大家分享一下，修真院官网 JS-06任...
angular4打包以后，刷新报404
diaobei9747的博客
07-06 302
项目打包以后，上传到服务器，可以正常的切换页面，但是一旦刷新就会报404，找不到页面，其解决方法是：在app.module.ts里面引入下面的模块： import {HashLocationStrategy, LocationStrategy} from "@angular/common"; 在providers数组里面加入： providers: [{ ...
Angular2 路由刷新404解决办法
李纯
10-22 2441
Angular2设置路由，部署后刷新后Tomcat直接出来404。 从来只逛博客，赞都懒得点的人突然开始写博客。只是因为最近接触了Angular2，网上资源太少，之前又没有Angular1的基础，真是举步维艰，记录下自己艰辛的历程。同时公司没有建立知识库博客等相关的工具，在此方便交流下，还有上班些博客其实不当误工作的 ^_^ (代码部分也不涉及公司业务)。
项目（Angular + Ionic）打包成 H5 应用后，刷新路由报 404，且图标不显示
Lyrelion的博客
12-26 912
1.项目（Angular + Ionic）打包成 H5 后，刷新路由报 404； 2.项目（Angular + Ionic）打包成 H5 后，图标无法正常显示；
《Angular之部署刷新404错误解决》
杨晓风 迷迭香的记忆
11-26 4016
随着Angular的深入实践，某些问题悄然浮出水面，但方法总比困难多，请听小编娓娓道来。
angularjs路由跳转页面后刷新报404错误
高飞的专栏
06-07 5033
服务器环境: nginxangularjs自带路由功能，当通过路由跳转的新页面时，由于目录下并不存在该页面对应的静态文件，所以此时执行刷新页面，会报404的错误。进一步讲，原因是在刷新请求页面时，nginx 等服务器会先于angularjs接管页面跳转，由于nginx并没有 angularjs里的路由，因此会报错。所以解决的方法就是让nginx把路由转发的功能交回angularjs的ng-app。n
Angular默认路由策略-PathLocationStrategy策略页面刷新报404错误解决方案
weixinhmz的博客
09-01 266
Angular默认路由策略-PathLocationStrategy策略页面刷新报404错误解决方案
配置Nginx出现No input file specified.
YIP
05-23 2182
决定用Nginx来试试magento，但是配置过程出现如题错误，最终我的解决方案是： 终端输入sudo gedit /etc/nginx/sites-available/default   找到下面代码：     # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000     location ~ /.ph
nginx的防跨目录设置产生no input file specified错误
weixin_33794672的博客
06-08 138
转载于:https://www.cnblogs.com/hoewang/p/10257229.html
apache.htaccess文件重写配置
qq_37482307的博客
06-15 621
tp3.2 <IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^(.*)$ index.php?s=$1 [QSA,PT,L] </IfModule> t...
Angular通过Ngnix发布
hzjanger的博客
03-14 260
编写ngnix配置文件 在项目的根目录下创建default.conf文件 server { listen 80; server_name 192.168.2.131; location / { root /usr/share/nginx/html; index index.html index.htm; try_files $uri $uri/ /in...
路由地址404
最新发布
04-20
### 解决路由地址404错误的方法 当遇到前端应用（如 Vue、React 或 Angular）部署到生产环境后，直接访问带有路由的 URL 地址返回 404 错误时，通常是因为服务器未正确处理这些请求。以下是针对不同框架和服务器的具体解决方案。 #### 1. **Vue 应用** 如果使用的是 Vue 的 `history` 路由模式，则需要确保 Nginx 正确配置以支持该模式。Nginx 默认会尝试匹配文件路径，而不会自动回退到前端应用入口文件（通常是 `index.html`）。因此可以通过如下方式解决问题： ```nginx location / { try_files $uri $uri/ /index.html; } ``` 这段配置的作用是告诉 Nginx 当找不到对应的静态资源时，将所有未知路径重定向至 `/index.html` 文件[^1]。 #### 2. **React 应用** 对于 React 应用而言，如果是基于 `BrowserRouter` 构建的应用程序，在刷新页面或者直接输入带参数的 URL 后出现 404 错误，原因可能在于服务端未能识别前端定义的历史路由模式。此时可以采用类似的 Nginx 配置来解决这一问题： ```nginx location / { try_files $uri /index.html; } ``` 此设置同样适用于其他 Web Server 如 Apache 等情况下的调整[^2]。 #### 3. **Angular 应用** 在 Angular 中也存在同样的问题——即浏览器无法加载除根目录外的任何子路径。为此可以在 Nginx 上做相应的更改: ```nginx server { listen 80; server_name localhost; root /path/to/angular/app/dist/; index index.html index.htm; location / { try_files $uri /index.html; } } ``` 这里的关键仍然是利用 `try_files` 指令让所有的非文件请求都指向 `index.html`, 进一步交由客户端 JavaScript 处理导航逻辑[^4]。 #### 4. **Tomcat 部署场景** 若是 Java Spring Boot 类型项目运行于 Tomcat 容器之上发生类似状况，则需确认 Servlet 映射是否准确无误以及是否存在上下文路径冲突等问题。例如表单提交动作应指定正确的相对URL而非硬编码绝对路径；另外还需注意 web.xml 或者 spring mvc controller 方法上的@RequestMapping 注解值要与实际调用一致[^3]。 综上所述，无论是哪种技术栈构建出来的 SPA(Single Page Application)，都需要关注其背后所依赖的服务层如何适配前端历史状态管理机制的要求。 ```python # 示例 Python Flask 路由兜底实现 (仅作参考) @app.route('/<path:path>') def catch_all(path): return app.send_static_file('index.html') ``` 以上代码片段展示了另一种常见做法：通过编程手段捕获任意未命中 API 接口之外的所有 HTTP 请求并统一响应为首页内容。
评论 17
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值