AngularJS刷新页面出现404错误的解决方法求教

嘿，这个问题我太熟了！你遇到的是前端路由和静态文件服务器不兼容的经典场景：开启HTML5模式后，AngularJS接管了所有路由跳转，但刷新页面时浏览器会直接向服务器请求当前URL对应的物理文件——可这些路由路径根本不是真实存在的文件，服务器自然返回404了。下面给你两个简单的解决思路，先搞定开发阶段的问题：

一、自定义Python HTTP服务器（开发阶段快速解决） #

默认的http.server只会匹配真实存在的文件/目录，我们可以写个小脚本，让所有不存在的请求都返回index.html，把路由控制权交还给AngularJS。

1. 在你的前端项目根目录下创建一个custom_server.py文件，内容如下：

from http.server import SimpleHTTPRequestHandler
import socketserver
import os

class AngularHandler(SimpleHTTPRequestHandler):
    def do_GET(self):
        # 检查请求的路径是否对应真实文件或目录
        if not os.path.exists(os.getcwd() + self.path):
            # 如果不存在，返回index.html
            self.path = '/index.html'
        # 调用父类的处理逻辑
        return super().do_GET()

if __name__ == "__main__":
    PORT = 8000
    with socketserver.TCPServer(("", PORT), AngularHandler) as httpd:
        print(f"AngularJS开发服务器运行在 http://localhost:{PORT}")
        httpd.serve_forever()

2. 运行这个自定义服务器：

python custom_server.py

之后访问页面、刷新就不会出现404了，所有不存在的路径都会被引导到index.html，由AngularJS处理路由。

二、确认AngularJS的HTML5模式配置正确 #

别忘检查你的config.js里的配置是否完整，缺了这两步也会出问题：

• 确保开启HTML5模式并设置hash前缀（可选但推荐）：

angular.module('yourApp', [])
  .config(['$locationProvider', function($locationProvider) {
    $locationProvider.html5Mode(true).hashPrefix('!');
  }]);

• 在index.html的<head>标签里添加<base href="/">，这能确保AngularJS正确解析资源路径和路由：

<head>
  <base href="/">
  <!-- 其他meta、样式等 -->
</head>

三、生产环境的方向指引 #

如果之后要部署到生产环境，你需要在真实的Web服务器（比如Nginx、Apache）里做类似的路由配置：

• Nginx：在server块里添加try_files $uri $uri/ /index.html;，让服务器找不到文件时返回index.html
• Apache：启用mod_rewrite，然后添加Rewrite规则，把所有非文件/目录的请求转发到index.html

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