AngularJS 1.5移除URL哈希后刷新页面资源加载失败求助

我之前也碰到过一模一样的问题！当你开启html5Mode去掉URL里的#后，正常通过Angular路由跳转没问题，但手动刷新页面时，浏览器会直接向服务器请求当前URL，这时候就容易出现静态资源加载失败的情况。先看看你的配置，再一步步解决：

你的现有配置 #

1. App.js 路由配置 #

myapp.config(function($routeProvider, USER_ROLES, IdleProvider, KeepaliveProvider, $locationProvider) { 
  $locationProvider.html5Mode(true); 
});

2. urlrewrite.xml 路由规则 #

/login → resources/partials/login.html
/login/brandname → resources/partials/login.html
/home → resources/partials/home.html

3. web.xml 过滤器配置 #

<web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" version="3.0">
  <display-name>Archetype Created Web Application</display-name>
  <filter>
    <filter-name>UrlRewriteFilter</filter-name>
    <filter-class>org.tuckey.web.filters.urlrewrite.UrlRewriteFilter</filter-class>
    <init-param>
      <param-name>confPath</param-name>
      <param-value>/WEB-INF/urlrewrite.xml</param-value>
    </init-param>
  </filter>
  <filter-mapping>
    <filter-name>UrlRewriteFilter</filter-name>
    <url-pattern>/*</url-pattern>
    <dispatcher>REQUEST</dispatcher>
    <dispatcher>FORWARD</dispatcher>
  </filter-mapping>
</web-app>

问题根源 #

当你刷新/home这类URL时，服务器会根据你的urlrewrite规则把请求转发到resources/partials/home.html，但这个页面不是你的入口文件index.jsp！而且更关键的是，你的JS/CSS如果用的是相对路径，浏览器会从/home/js/xxx.js去加载，自然找不到资源。

分步解决方案 #

1. 给HTML页面添加base标签 #

在index.jsp的<head>中添加<base>标签，指定所有资源的基准路径：

<base href="/">

这会告诉AngularJS和浏览器，所有静态资源都从根目录开始加载，不管当前URL是什么层级。

2. 修改urlrewrite规则，让所有路由请求指向index.jsp #

你的现有规则是直接转发到partial页面，但AngularJS的路由需要入口文件index.jsp来初始化应用。更新urlrewrite.xml：

<!-- 首先，放行所有静态资源请求，比如js、css、images、resources下的文件 -->
<rule>
  <from>^/(js|css|images|resources)/.*$</from>
  <to type="passthrough">%{requestURI}</to>
</rule>

<!-- 把所有非静态资源的路由请求转发到index.jsp，让AngularJS处理路由 -->
<rule>
  <from>^/(login|home)(.*)$</from>
  <to type="forward">/index.jsp</to>
</rule>

<!-- 如果有其他路由，也可以用更通用的规则匹配所有非静态资源路径 -->
<!-- <rule>
  <from>^/(?!js|css|images|resources).*$</from>
  <to type="forward">/index.jsp</to>
</rule> -->

3. 检查静态资源的引用路径 #

确保index.jsp中引用JS、CSS等资源时使用绝对路径，比如：

<!-- 正确写法 -->
<link rel="stylesheet" href="/css/main.css">
<script src="/js/angular.min.js"></script>
<script src="/js/app.js"></script>

<!-- 错误写法（相对路径，刷新后会出错） -->
<!-- <link rel="stylesheet" href="css/main.css"> -->
<!-- <script src="js/angular.min.js"></script> -->

这样修改之后，刷新页面时服务器会把请求转发到index.jsp，AngularJS会根据当前URL加载对应的partial页面，同时静态资源也会从正确的根路径加载，就不会出现404的问题了。

内容的提问来源于stack exchange，提问作者Praveen