【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版、ふたつのテキストご用意してます♪

社内にWebアプリ開発経験がなくて、困ってませんか?

「自社でWebアプリ開発を始めていきたい」
という企業様のために、Laravelセミナー・プログラミング教育を実施しています。

【セミナー使用スライド】

詳細はこちらご覧ください

Twitter始めました。
40代からプログラミング!

コメント

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