Blazor WASM应用在Apache子路径下无法加载的原因及解决办法

问题原因 #

当通过子路径example.com/sometestfolder/main/wwwroot访问时，加载失败的核心原因有两点：

1. 资源路径不匹配：Blazor WASM默认以网站根目录为基准加载dotnet.wasm、.dll等核心资源，子路径下应用会尝试从根目录而非当前子路径请求这些资源，导致404错误。
2. Apache配置缺失：直接将DocumentRoot设为/var/www时，未为该子目录配置Blazor所需的MIME类型映射、404 fallback到index.html等规则，这些规则是Blazor路由和资源加载的必要条件。

解决方法 #

1. 调整Blazor应用的Base路径 #

修改服务器上/var/www/sometestfolder/main/wwwroot/index.html中的<base>标签，将根路径改为对应子路径：

<base href="/sometestfolder/main/wwwroot/">

2. 配置Apache子目录规则 #

在httpd.conf或新增的配置文件中，添加针对该子目录的专属配置：

<Directory "/var/www/sometestfolder/main/wwwroot">
    # 禁止目录索引
    Options -Indexes
    AllowOverride None

    # 配置Blazor核心资源的MIME类型
    AddType application/wasm .wasm
    AddType application/octet-stream .dll

    # 404请求跳转至index.html，支持Blazor客户端路由
    ErrorDocument 404 /sometestfolder/main/wwwroot/index.html

    # 启用资源压缩优化加载速度
    <IfModule mod_deflate.c>
        AddOutputFilterByType DEFLATE text/css
        AddOutputFilterByType DEFLATE application/javascript
        AddOutputFilterByType DEFLATE text/html
        AddOutputFilterByType DEFLATE application/octet-stream
        AddOutputFilterByType DEFLATE application/wasm
        <IfModule mod_setenvif.c>
            # 针对旧浏览器调整压缩规则
            BrowserMatch ^Mozilla/4 gzip-only-text/html
            BrowserMatch ^Mozilla/4.0[678] no-gzip
            BrowserMatch bMSIE !no-gzip !gzip-only-text/html
        </IfModule>
    </IfModule>
</Directory>

3. （可选）使用虚拟主机配置 #

若希望通过独立域名访问应用，可配置虚拟主机，以下是适配场景的官方配置示例（已翻译为中文注释）：

<VirtualHost *:80>
    # 主访问域名
    ServerName blazor.example.com
    # 泛域名别名
    ServerAlias *.blazor.example.com

    # Blazor应用根目录
    DocumentRoot "/var/www/sometestfolder/main/wwwroot"
    # 404请求跳转至index.html，支持客户端路由
    ErrorDocument 404 /index.html

    # 配置Blazor核心资源的MIME类型
    AddType application/wasm .wasm
    AddType application/octet-stream .dll

    <Directory "/var/www/sometestfolder/main/wwwroot">
        Options -Indexes
        AllowOverride None
    </Directory>

    # 启用资源压缩
    <IfModule mod_deflate.c>
        AddOutputFilterByType DEFLATE text/css
        AddOutputFilterByType DEFLATE application/javascript
        AddOutputFilterByType DEFLATE text/html
        AddOutputFilterByType DEFLATE application/octet-stream
        AddOutputFilterByType DEFLATE application/wasm
        <IfModule mod_setenvif.c>
            BrowserMatch ^Mozilla/4 gzip-only-text/html
            BrowserMatch ^Mozilla/4.0[678] no-gzip
            BrowserMatch bMSIE !no-gzip !gzip-only-text/html
        </IfModule>
    </IfModule>

    # 错误日志与访问日志路径
    ErrorLog /var/log/httpd/blazorapp-error.log
    CustomLog /var/log/httpd/blazorapp-access.log common
</VirtualHost>

配置完成后，重启Apache服务生效：

systemctl restart httpd

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