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

Posted 2023-04-18

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

【英文标题】：When I use ngrok to load my Laravel app , it only displays basic html and no css

【发布时间】：2021-12-13 15:07:08

【问题描述】：

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

尽管我尝试通过 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作为NGROK_URL: url添加到.env文件中，然后清除所有应用缓存

结果：没有 CSS 或 js

第二种方法是通过 ngrok 暴露端口 9000，并在我的 laravel 应用程序上运行 php artisan serve --port=9000。 (https://www.youtube.com/watch?v=s8efVe5c1Xg) 一样，没有 CSS 和 js。

我也试过这里提到的：NGrok and Laravel 但它只加载了 XAMPP 欢迎页面

我们的 CSS 和 js 与使用 asset() 链接的 CSS 和 js 文件以及 CDN 的使用混合在一起。

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

【参考方案1】：

我只需要按照这篇文章进行操作即可： https://www.jobsity.com/blog/how-run-ngrok-test-share-your-local-development

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

php artisan serve

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

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

运行 ngrok，输入

ngrok http 8000

会出现与此处类似的转发链接：（请注意，您的转发链​​接会有所不同）

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

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

【讨论】：

链接到一篇文章很好，但关键步骤应该在答案本身中总结出来。 Stack Overflow 的答案应该是独立的，因为链接经常更改/中断。

注意，我编辑了我的答案。谢谢！

酷，我遇到了类似的问题，但它发生在另一个人身上，我能够查看登录页面（微风）并使用仪表板内的内容就好了，但我的 1测试人员无法查看样式和 js。