Windows下Apache2.4配置：解决React路由刷新404及特定IP访问问题

问题背景 #

已在Windows系统部署Apache2.4，托管React前端+Django后端的文件处理Web应用，目标仅允许特定IP访问。本地localhost访问应用正常，但使用指定IP访问时：

• 根路由（默认指向/login）可正常访问
• 登录后前端路由跳转正常，但刷新页面时Apache返回"Not Found"错误

问题原因 #

React是单页应用（SPA），前端路由由React Router在浏览器端处理。刷新页面时，浏览器会直接向Apache请求该路由路径（如/dashboard），但Apache在文件系统中找不到对应的物理文件，因此返回404。需配置Apache将所有前端路由请求转发到index.html，由React Router接管路由逻辑。

解决方案 #

1. 确认mod_rewrite模块已启用 #

检查httpd.conf中已存在以下配置（你的配置中已加载，可跳过此步）：

LoadModule rewrite_module modules/mod_rewrite.so

2. 简化并修改httpd-vhosts.conf #

删除重复的<Location>配置，添加rewrite规则，同时保留IP访问控制：

<VirtualHost *:8080>
    DocumentRoot "LOCATION/OF/FRONTEND/build"
    ProxyPreserveHost On
    Alias /static/zips "LOCATION/OF/STORAGE/zips"

    # 统一IP访问控制：仅允许指定IP和本地访问
    <Location "/">
        AllowOverride All
        <RequireAny>
            Require ip 1.1.1.1
            Require ip 8.8.8.8
            Require local
        </RequireAny>
    </Location>

    # 配置Rewrite规则处理SPA路由
    RewriteEngine On
    # 排除API请求和静态资源，直接转发给后端或返回文件
    RewriteCond %{REQUEST_URI} !^/api
    RewriteCond %{REQUEST_URI} !^/static
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    # 将所有非文件/非目录的请求转发到index.html
    RewriteRule ^(.*)$ /index.html [L]

    # Django后端API代理
    ProxyPass /api http://127.0.0.1:8000/api
    ProxyPassReverse /api http://127.0.0.1:8000/api

    ServerName localhost
</VirtualHost>

3. 优化httpd.conf中的目录配置 #

可将重复的IP访问控制简化，避免冗余（可选，但更清晰）：

# 根目录权限
<Directory "/">
    Options Indexes FollowSymLinks
    AllowOverride All
    <RequireAny>
        Require ip 1.1.1.1
        Require ip 8.8.8.8
        Require local
    </RequireAny>
</Directory>

# 前端build目录
<Directory "LOCATION/OF/FRONTEND/build">
    Options Indexes FollowSymLinks
    AllowOverride All
    <RequireAny>
        Require ip 1.1.1.1
        Require ip 8.8.8.8
        Require local
    </RequireAny>
</Directory>

4. 重启Apache服务 #

在Windows服务中找到Apache2.4服务右键重启，或使用命令行：

net stop Apache2.4
net start Apache2.4

关键说明 #

• RewriteCond %{REQUEST_FILENAME} !-f 和 RewriteCond %{REQUEST_FILENAME} !-d：确保仅当请求的路径不是物理文件或目录时，才转发到index.html，静态资源（如CSS、JS）和API请求不受影响
• 统一IP访问控制：用单个<Location "/">覆盖所有路径，避免重复配置多个<Location>节点
• 若前端React项目中使用了basename配置，需在RewriteRule中对应调整（如RewriteRule ^(.*)$ /your-basename/index.html [L]）

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