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

LaravelとStripe API連携

2022.07.01 2020.11.05

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

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

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

use Illuminate\Support\Facades\URL;

1	use Illuminate\Support\Facades\URL;

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

    public function boot()
    {
        URL::forceScheme('https');
    }

public function boot()

{

URL::forceScheme('https');

}

以上！

Junko

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

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

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

NGROKによる表示崩れの原因

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

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

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