Angular+Laravel站点移除URL#后刷新404，.htaccess配置求解

我来帮你搞定这个问题！你现在遇到的是Angular开启HTML5模式（移除URL中的#）后，页面刷新出现404，同时还要和同目录下的Laravel后端共存的经典场景，完全可以不用移动文件位置，只调整.htaccess的规则顺序和逻辑就能解决。

先分析你现有.htaccess的问题 #

你当前的规则顺序有逻辑冲突：先把所有不存在的资源直接跳转到index.html，但后面又保留了Laravel导向index.php的规则，这会导致后端API请求被错误导向前端页面，同时前端路由刷新时，服务器找不到对应文件就返回404（因为没正确把前端路由请求交给index.html处理）。

修改后的.htaccess配置 #

直接替换成下面的规则，就能同时兼顾Angular前端路由和Laravel后端API：

<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews -Indexes
    </IfModule>

    RewriteEngine On

    # 先处理Authorization头，避免后续规则覆盖导致Laravel无法获取授权信息
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

    # 如果是已存在的静态资源或目录，直接访问不重写
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
    RewriteRule ^ - [L]

    # 重定向末尾斜杠（非目录的情况）
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} (.+)/$
    RewriteRule ^ %1 [L,R=301]

    # 处理Laravel后端API请求（假设你的API路由都以/api开头，可根据实际前缀调整）
    RewriteRule ^api/ index.php [L]

    # 所有其他非文件/目录的请求，交给Angular的index.html处理前端路由
    RewriteRule ^ /index.html [L]
</IfModule>

关键规则说明 #

• Authorization头优先处理：放在最前面，确保Laravel能正常获取用户授权信息，不会被后续重写规则过滤掉
• 静态资源优先访问：已存在的图片、JS、CSS等文件或目录直接访问，不干扰前端路由和后端API逻辑
• API路由单独分流：把以/api开头的请求导向Laravel的index.php，如果你的API前缀不是/api，改成你实际使用的前缀即可
• 前端路由兜底接管：除了API和静态资源外，所有其他请求都交给index.html，这样Angular的路由系统就能接管请求，刷新页面也不会出现404

额外要做的Angular配置 #

确保你已经在Angular项目里正确开启了HTML5模式：

1. 在index.html里设置正确的base href：

<base href="/">

2. 在路由模块（比如app-routing.module.ts）里启用无#模式（默认就是该模式，也可显式声明）：

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

const routes: Routes = [
  // 你的路由配置
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: false })], // useHash设为false就是无#模式
  exports: [RouterModule]
})
export class AppRoutingModule { }

这样配置后，不管是前端页面刷新，还是后端API请求，都能正常工作，完全不需要移动index.html和index.php的位置。

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