【URL was loaded over HTTPS】一文だけでNGROKによる表示くずれを修正

Laravel・PHP豆知識・トラブル対策

NGROKによって ローカル環境でHTTPS通信を行うことが可能です。

ただ、NGROKによって生成されたURLを使うと、CSSやJavaScriptが無効になり、表示もくずれたりします。これを修正する方法を解説します。

下記コードを app/Providers/AppServiceProvider.phpの最初にuse宣言をいれます。

さらにboot部分に下記を追加しましょう。

以上!

Junko
Junko

他にも方法はありますが、これが一番手っ取り早い方法です。

テストが終わったら必ず、元に戻しておいてくださいね。

なおセキュリティ関連のツールにより、表示ができないこともあります。その場合は、ngrokのURLも表示できるよう、ツールの設定を変えておきましょう。

NGROKによる表示崩れの原因

ちなみに、NGROKが生成したHTTPSのURLを使用すると表示がくずれる原因は、次のとおりです。

  • 本体はHTTPS通信で送信される
  • CSSやJavaScriptファイルはHTTP通信で送信されてしまう

今回は強制的にHTTPS通信にすることで、エラーを修正しました。

なおNGROKの設定方法(Windows)はこちらの記事で解説しています。

Laravel・PHP豆知識・トラブル対策 Laravel上の決済機能

【Laravelの教科書・無料プレゼント】

Junko
Laravelの使い方を覚えたい!と思ったら、ぜひ、役立ててほしいです。
ひつじプログラマ
会員制サイトをいちから作っていくよ。ボタンをクリックして詳細を見てね。
Laravelの教科書の詳細を見る

Laravel8版と、最新のLaravel9版、ふたつのテキストご用意してます♪

【無料プレゼント】

「LaravelでWebアプリをいちから作れるようになりたい!」

そんなLaravel初心者のあなたへ【Laravelの教科書】基礎編プレゼント中! 会員制フォーラムサイトを学習しながら作れます。

詳細はこちらをクリック

Laravel8版と、最新のLaravel9版、ふたつのテキストご用意してます♪

Laravel関連のご相談承ってます♪
「Webアプリを開発してほしい」
「社内にLaravelが分かる人がいない。コンサルしてほしい」
そんな企業様のご依頼承っています。
お問い合わせはこちら
Laravel関連のご相談承ってます♪
「Webアプリを開発してほしい」
「社内にLaravelが分かる人がいない。コンサルしてほしい」
そんな企業様のご依頼承っています。
お問い合わせはこちら
Twitter始めました。
40代からプログラミング!

コメント

タイトルとURLをコピーしました