Flutter Web生产环境资源无法显示，报403权限错误求助

核心问题分析 #

控制台的403错误是关键——服务器拒绝了manifest.json、FontManifest.json等文件的访问请求，这直接导致字体、图片、Material图标加载失败。Service Worker超时是衍生问题，根源还是资源访问受限。

具体修复方案 #

1. 检查服务器文件权限 #

• 确保build/web下的所有文件（包括根目录的manifest.json、FontManifest.json，以及assets文件夹内的所有资源）权限配置正确，服务器进程拥有读取权限。
  • Linux服务器可执行命令：chmod -R 644 /path/to/your/web/files，目录权限设为755：chmod -R 755 /path/to/your/web/assets
• 确认服务器安全规则没有拦截这些特定文件名的访问（比如部分安全插件会默认阻止manifest.json请求）。

2. 验证Flutter资源配置 #

检查pubspec.yaml里的资源声明是否准确，避免路径错误：

flutter:
  assets:
    - assets/
    - assets/images/  # 有子目录需单独声明
  fonts:
    - family: YourCustomFont
      fonts:
        - asset: assets/fonts/your_font.ttf

重新执行构建命令：flutter build web --release --web-renderer html，确认build/web下生成了完整的FontManifest.json和AssetManifest.json文件。

3. 调整服务器路由规则 #

多数服务器（如Nginx、Apache）需要配置路由，避免单页应用规则拦截静态资源请求：

• Nginx示例配置：

location / {
  try_files $uri $uri/ /index.html;
}
# 静态资源直接返回，不重定向到index.html
location ~* \.(json|png|jpg|woff|woff2|ttf|svg)$ {
  root /path/to/your/web/build;
  expires 30d;
}

• Apache示例配置：
  在.htaccess文件中添加：

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

4. 临时禁用Service Worker排查 #

如果Service Worker超时干扰排查，可先禁用它：
在index.html中注释掉以下代码：

// if ('serviceWorker' in navigator) {
//   window.addEventListener('load', function () {
//     navigator.serviceWorker.register('flutter_service_worker.js');
//   });
// }

部署后测试资源是否正常加载，排除Service Worker的影响。

额外检查点 #

• 确认服务器部署的是build/web目录下的全部文件，而非仅上传部分文件夹。
• 查看浏览器开发者工具的Network标签，检查资源请求的完整路径是否正确。若部署在子路径下，构建时需添加--base-href参数：flutter build web --release --web-renderer html --base-href "/your-subpath/"

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