Angular 5路由404问题求助：配置.htaccess后仍存异常

嘿，你通过配置.htaccess将所有请求重定向到index.html来解决404的思路完全没问题——毕竟Angular作为单页应用（SPA），前端路由是浏览器端接管的，服务器本身根本没有/public/public-data这类路径对应的物理资源，这个操作是SPA部署的标准操作。

不过你提到还有未明确的问题，结合Angular 5 + Java后端的技术栈，我大概率能猜到是以下几种常见场景，给你逐一分析并提供解决办法：

1. 后端API请求被误重定向到index.html #

如果你的前端请求后端接口（比如/api/get-data）也被.htaccess规则劫持重定向到了index.html，那肯定会导致接口返回HTML而非预期的JSON数据。这种情况需要修改.htaccess，排除API路径和静态资源：

RewriteEngine On
# 排除API前缀的请求，让它们直接到Java后端
RewriteCond %{REQUEST_URI} !^/api/
# 排除静态资源文件（css、js、图片等）
RewriteCond %{REQUEST_URI} !\.(css|js|png|jpg|jpeg|gif|ico|svg)$
# 排除已存在的文件或目录（比如真实的静态资源文件）
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
# 剩下的请求都重定向到index.html交给Angular路由处理
RewriteRule ^ index.html [L]

2. 深层路由下的静态资源加载失败 #

当你在/public/public-data这类深层路由刷新页面时，如果index.html里的静态资源（比如styles.css、vendor.js）用的是相对路径，浏览器会尝试从/public/public-data/styles.css加载资源，自然找不到。解决办法有两个：

• 直接在index.html中使用绝对路径引用静态资源：

  <!-- 错误写法 -->
  <!-- <link rel="stylesheet" href="styles.css"> -->
  <!-- 正确写法 -->
  <link rel="stylesheet" href="/styles.css">
  <script src="/vendor.js"></script>
  

• 在Angular的angular.json中配置baseHref，统一静态资源的根路径：

  {
    "projects": {
      "your-project-name": {
        "architect": {
          "build": {
            "options": {
              "baseHref": "/",
              // ...其他配置
            }
          }
        }
      }
    }
  }
  

3. Java后端与前端路由的配置冲突 #

如果你的Java后端（比如Spring Boot）同时负责托管Angular的静态文件，只靠.htaccess可能不够，还需要在后端配置里添加SPA路由转发规则，避免后端返回404。比如Spring Boot中可以写一个专门的控制器：

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class SpaForwardController {
    // 匹配所有不带后缀的请求，转发到index.html
    @RequestMapping(value = "/**/{path:[^.]*}")
    public String forwardToIndex() {
        return "forward:/index.html";
    }
}

这样即使你部署在Tomcat这类Java容器中，也能确保前端路由正常工作，同时不影响API请求。

4. 可选方案：切换到Hash模式路由 #

如果你不想折腾服务器配置，可以考虑把Angular默认的PathLocationStrategy（不带#的路径）切换成HashLocationStrategy（带#的路径），这种模式下浏览器不会把#后面的路径发给服务器，自然不会出现404问题。

修改app.module.ts的路由配置：

import { NgModule } from '@angular/core';
import { RouterModule, Routes, ExtraOptions } from '@angular/router';

const routes: Routes = [
  { path: 'public/public-data', component: PublicDataComponent },
  // ...你的其他路由配置
];

// 启用Hash模式
const routerConfig: ExtraOptions = {
  useHash: true,
  enableTracing: false, // 调试时可以打开
};

@NgModule({
  imports: [RouterModule.forRoot(routes, routerConfig)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

切换后路由会变成http://example.net/#/public/public-data，虽然URL多了个#，但配置成本极低。

以上是Angular 5 + Java后端场景下，解决404后最可能遇到的问题，你可以对照自己的实际情况排查。如果你的问题不在上述列表里，可以补充更多细节，我再帮你分析。

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