AngularJS移除URL哈希后页面刷新出现Cannot GET /{页面名}问题求助

嘿，这个问题我太熟了！当你把AngularJS的html5Mode打开去掉URL里的#后，刷新页面出现404是典型的SPA路由和后端路由不匹配的问题——浏览器刷新时会直接向服务器请求/users这个路径，但你的Laravel后端根本没定义这个路由，自然返回404啦。下面给你几个靠谱的解决办法：

方法1：给Laravel添加Fallback路由（最省心的后端方案） #

这个方案让所有未匹配到后端API的GET请求，都返回前端的入口页面，把路由控制权交还给AngularJS。

打开你的routes/web.php，先放好所有后端API路由，最后添加这条fallback路由：

// 你的API路由示例
Route::get('/api/users', 'UserController@index');

// 兜底路由：匹配所有未定义的GET请求
Route::fallback(function () {
    return view('index'); // 替换成你的前端入口视图，比如把Angular的index.html放在resources/views下的话
});

这样不管用户刷新哪个前端路由，后端都会返回入口页面，AngularJS就能正确加载对应的路由组件了。

方法2：配置前端服务器的重写规则（前后端分离场景用） #

如果你的前端是单独部署的（比如用Node服务器跑，Laravel只做API服务），那需要在前端服务器里加规则，让所有不存在的文件/目录请求都跳转到index.html。

如果你用Nginx： #

在服务器配置的server块里添加：

location / {
    try_files $uri $uri/ /index.html;
}

如果你用Apache： #

在前端项目根目录创建或修改.htaccess文件：

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
</IfModule>

这个规则的逻辑是：如果请求的是真实存在的文件或目录，就正常返回；否则就返回index.html，让AngularJS处理路由。

最后别忘了确认AngularJS的配置 #

确保你已经正确开启了html5Mode，并且设置了base href：

在AngularJS模块的配置里：

angular.module('myApp', [])
.config(['$locationProvider', function($locationProvider) {
    $locationProvider.html5Mode({
        enabled: true,
        requireBase: true
    });
}]);

同时在index.html的<head>标签里添加：

<base href="/">

这个base标签是AngularJS解析路由相对路径的关键，可不能忘！

如果你的Laravel既做API又负责提供前端页面，方法1最方便；如果是前后端分离部署，方法2更合适，两种方案结合也能起到双重保障~

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