使用ngrok公开Laravel应用仅加载HTML无CSS/JS如何解决？

#Laravel 应用通过ngrok共享资源加载失败解决方案
你遇到的静态资源加载失败问题核心有两个原因：一是Laravel生成的资源路径仍为本地域名/IP，未适配ngrok的公开域名；二是ngrok默认提供HTTPS访问，Laravel默认生成HTTP资源链接，会被浏览器的混合内容拦截规则拦截。

以下是两种场景的可落地操作方案： #

方案一：使用php artisan serve（推荐，配置少不易出错） #

• 步骤1：启动Laravel本地服务，执行命令：
  php artisan serve --port=9000 --host=0.0.0.0
• 步骤2：替换AppServiceProvider.php中你之前添加的boot方法代码：

public function boot(\Illuminate\Http\Request $request)
{
    if ($request->server->has('HTTP_X_ORIGINAL_HOST')) {
        $ngrokUrl = 'https://' . $request->server->get('HTTP_X_ORIGINAL_HOST');
        $this->app['url']->forceRootUrl($ngrokUrl);
        // 强制HTTPS适配ngrok访问规则
        $this->app['url']->forceScheme('https');
    }

    // 保留原有其他代码
}

• 步骤3：清除Laravel所有缓存，执行命令：
  php artisan config:clear && php artisan view:clear && php artisan route:clear
• 步骤4：启动ngrok，执行命令：
  ngrok http 9000
• 步骤5：复制ngrok控制台输出的HTTPS格式访问地址，直接分享给组员即可，无需额外修改配置。

方案二：使用XAMPP虚拟主机 #

• 步骤1：先确认XAMPP虚拟主机配置，已经将laravel-site.test的站点根目录指向Laravel项目的public文件夹，避免打开出现XAMPP欢迎页。
• 步骤2：AppServiceProvider.php的代码修改、缓存清理操作和方案一完全一致。
• 步骤3：启动ngrok，执行命令：
  ngrok http -host-header=laravel-site.test 80
• 步骤4：复制ngrok输出的HTTPS地址访问即可。

额外注意事项 #

• 无需在.env文件中手动配置NGROK_URL，上述代码会自动从请求头识别ngrok域名，避免ngrok重启后域名变更需要反复修改配置的问题。
• 若CDN资源加载失败，检查CDN链接是否为HTTPS格式，HTTP的CDN资源在HTTPS页面下会被浏览器拦截，替换为HTTPS格式即可。
• 如果仍出现资源加载失败，打开浏览器开发者工具的「网络」标签，查看资源请求的实际地址，若仍为本地域名则说明缓存未清理干净，重新执行缓存清理命令即可。

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