【URL was loaded over HTTPS】一文だけでNGROKなどによるCSSが反映されない表示くずれを修正

LaravelとStripe API連携

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

ただ、NGROKによって生成されたURLを使うと、CSSやJavaScriptが正しく適用されないことがあり、表示が崩れることがあります。この問題を解決する方法について解説します。

また、AWS環境等にプロジェクトをデプロイした際にも似たような問題が発生することがあります。

CSSが反映されない表示くずれを修正

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

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

以上!

Junko
Junko

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

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

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

NGROKによる表示崩れの原因

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

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

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

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

本番環境でのみ設定を反映させたい場合

本番環境でのみHTTPSを強制する設定を反映させ、開発環境ではこの設定を適用しない場合、AppServiceProviderのbootメソッドに条件文を追加してください。

本番環境の.envファイルの APP_ENV が ‘local’ になっていた場合は、次のように変更します。

これによって、本番環境でのみhttps通信が強制されるように設定できます。

LaravelとStripe API連携 Laravel・PHP豆知識・トラブル対策

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

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

最新のLaravel11版テキストに加え、Laravel8版・Laravel9版・Laravel10版もご用意しています♪

【無料プレゼント】

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

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

詳細はこちらをクリック

最新のLaravel11版テキストに加え、Laravel8版・Laravel9版・Laravel10版もご用意しています♪

Laravelの教科書限定コミュニティ【Laravelの教科書ラボ】はじめました。

デプロイ講座とVue.js講座付

StripeやChatGPT連携など過去10回分のセミナー動画視聴可能。

Laravel実践スキルをのばしたい方におすすめです。

ラボの案内を見てみる

【AWS関連・Webアプリ開発・生成AIのAPI活用のご相談承ってます】
お気軽にお声がけください。
御社にとって、最善の方法をご一緒に考えてまいります。
Zoomミーティング実施中。サンプルアプリご利用可能です。

お問合せフォーム

Laravelの本を書きました。


ひつじが目印♪
クリックするとamazonページへ。

Laravelの使い方を分かりやすく解説した書籍を出版しました。書店やAmazon等のオンラインショップにて販売中です。
Laravel10対応。Laravel11サポートガイドもご用意しています。詳しくは下記ボタンをクリック♪

書籍の詳細を見てみる

Laravelの本を書きました。


ひつじが目印♪
クリックするとamazonページへ。

最新版Laravel11用のサポートガイドご用意しています。

Laravelの使い方を分かりやすく解説した書籍を出版しました。書店やAmazon等のオンラインショップにて販売中です。

書籍の詳細を見てみる
Twitter始めました。
40代からプログラミング!
タイトルとURLをコピーしました