当我使用 ngrok 加载我的 Laravel 应用程序时，它只显示基本 html 而没有 css

Question

我和我的队友正在开发的网站只能在我的笔记本电脑上本地访问。我希望他们能够从自己的家中打开网站，以便我的前端成员可以立即编辑和查看网站中的更改。我也希望我的其他小组成员能够测试该网站。

我尝试通过 ngrok 暂时公开我们的 laravel 应用程序的所有方法，但它们只显示基本的 HTML。没有 CSS 和 javascript。

首先来自：https://vanrossum.dev/5-using-ngrok-with-laravel 其中涉及将其添加到应用程序的 AppServiceProvider.php 中：

public function boot(\Illuminate\Http\Request $request)
    {
        if (!empty( env('NGROK_URL') ) && $request->server->has('HTTP_X_ORIGINAL_HOST')) {
            $this->app['url']->forceRootUrl(env('NGROK_URL'));
        }

        // other code
}

，在 ngrok 上运行它，

ngrok http -host-header=rewrite laravel-site.test:80

将收到的 url 添加到 .env 文件中，作为

NGROK_URL: url

，然后清除所有应用程序缓存

结果：没有 CSS 或 js

第二种方式涉及通过 ngrok 公开端口 9000，并在我的 laravel 应用程序上运行

php artisan serve --port=9000

。 (https://www.youtube.com/watch?v=s8efVe5c1Xg)同样的事情，没有 CSS 和 js。

我也尝试了这里提到的内容：NGrok 和 Laravel 但它只加载了 XAMPP 欢迎页面

我们的 CSS 和 js 与使用

asset()

链接的 CSS 和 js 文件以及 CDN 的使用混合在一起。

我应该怎么做才能与我的队友分享网站？

Answer 1

我刚刚向 app.blade.php 添加了一个新的元标记：

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

Answer 2

我只需要仔细阅读这篇文章即可： https://www.jobsity.com/blog/how-run-ngrok-test-share-your-local-development

1. 在 VSCode 中打开 gitbash 终端，并将您的项目添加到工作区中。 （请确保 gitbash 终端中指示的路径是您项目的路径） 通过键入打开 artisan 服务器

php artisan serve

这将使用 127.0.0.1 而不是 localhost（默认）。

让控制台和 artisan 服务器进程保持运行。这是监听请求的网络服务器。

2. 运行 ngrok，输入

ngrok http 8000

3. 将会出现类似于此处的转发链接：（请注意，转发链接对于您来说会有所不同）

Tunnel Status                 online
Version                       1.7/1.6
Forwarding                    http://284abb77.ngrok.com -> 127.0.0.1:8000

4. 复制 http 链接并将其发送给您出于开发或测试原因想要访问该网站的任何人。 （复制 https 链接将导致纯 HTML 页面，没有 css/js）

Answer 3

发生这个错误是因为在你的CSS或引导程序的某些部分，链接是http，你需要做的就是强制它们更改为https，它非常简单，你所要做的就是

1：转到应用程序->提供商->AppServiceProvider 2：在Register Function里面写下这个

if (env(key: 'APP_ENV') !=='local') {
  URL::forceScheme(scheme:'https');
}

3：重新加载您的网站即可开始 😉

Answer 4

我找到了解决方案：在这里

• npm 运行构建

• 创建app/Http/Middleware/UpgradeToHttpsUnderNgrok.php：

public function handle(Request $request, Closure $next): Response
{
   if (str_ends_with($request->getHost(), '.ngrok-free.app')) {
       URL::forceScheme('https');
   }

   return $next($request);
}

• 在app/Http/Kernel.php中注册中间件：

protected $middlewareGroups = [
     'web' => [
                 ...
         UpgradeToHttpsUnderNgrok::class,
     ],
         ...
 ];

Answer 5

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

当我使用 ngrok 加载我的 Laravel 应用程序时，它只显示基本 html 而没有 css，所以我尝试将以下链接添加到标题，然后它解决了我的问题