Laravel与AngularJS路由刷新404问题求助

哥们，我太懂你这个痛点了——前后端路由衔接的时候，HTML5模式下刷新带多级路径的页面简直是经典坑！咱们一步步来搞定它：

问题根源 #

你当前的Laravel路由Route::get('/{all}', ...)里，{all}参数默认的正则规则是[^/]+，也就是只能匹配单个路径段（比如blog），但当你访问/blog/1时，Laravel会把blog当成{all}的值，剩下的/1找不到对应的路由，直接返回404。

解决方案 #

1. 修正Laravel的通配路由

给{all}参数加上正则约束，让它能匹配任意路径（包括斜杠）：

Route::get("/", function(){ 
    return view("index"); 
}); 

Route::get('/{all}', function () { 
    return view('index'); 
})->where('all', '.*'); // 关键：添加这个正则约束

这样不管你访问/blog、/blog/1还是更深的路径，Laravel都会把整个路径匹配到{all}里，然后返回index视图，交给AngularJS的UI Router处理。

2. 确保Web服务器的重写配置正确

• Apache环境：检查项目根目录的.htaccess文件，确保包含正确的重写规则，把所有非文件/目录的请求都导向index.php：

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

    RewriteEngine On

    # 处理Authorization头
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

    # 移除末尾斜杠
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} (.+)/$
    RewriteRule ^ %1 [L,R=301]

    # 所有非文件/目录请求都转发到index.php
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]
</IfModule>

• Nginx环境：在站点配置里添加try_files指令：

location / {
    try_files $uri $uri/ /index.php?$query_string;
}

3. 再次确认AngularJS的配置

你已经设置了$location.html5Mode(true)，记得要在HTML的<head>里正确配置<base>标签，比如：

<base href="/">

这个标签是AngularJS HTML5模式下正确解析路由的关键，千万别漏了！

验证方法 #

修改完配置后，先清空Laravel的路由缓存（如果开启了缓存）：

php artisan route:clear

然后刷新/blog/1页面，应该就能正常加载AngularJS的路由了！

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