Laravel8で混合コンテンツ(Mixed Content)のエラーが発生

Web開発
この記事は約2分で読めます。

こんにちは、@Manabu です。

この記事では、Laravelの8.8を操作中に発生した混合コンテンツ(Mixed Content)のエラーについて記載しています。

Laravel導入時に同じような事象が発生するかもしれないので、ぜひ参考にしてください。

はじめに

今回は、public/css/app.cssをスタイルシートとしてbladeファイルで読み込もうとした時に、httpで読み込まれていることで発生した事象です。

bladeファイルに記載していたソースは以下になります。

<link href="{{ asset('css/app.css') }}" rel="stylesheet">

色々試しましたが、解決策としては非常に簡単な方法で対応できるので、紹介します。

対応内容

公式サイトとconfig/app.phpを見ていると、怪しい部分を見つけました。

原因

今回の事象が発生した原因としては、Laravelで使用できるasset関数のURLを指定していないところにありました。

.envファイルでASSET_URL変数を設定することにより、アセットURLホストを設定できます。
公式サイトより

この設定をしていないと、httpで関数に指定されているファイルを読み込むような動作になっているようです。

解決方法

解決方法としては簡単で、.envファイルに以下のソースを追加するだけです。

ASSET_URL="${APP_URL}"

これで、.envファイルの「APP_URL」で指定されているURLを、Asset関数にも指定することができます。
※別の外部ファイルなどを使用したい場合、ご自身で使用するURLに書き換えてください。

最後に

エラーの内容はすぐにわかったのですが、解決策が出るまでに2、3時間かかってしまいました。

asset関数を使用して、外部ファイルを読み込む場合、この設定がされているか確認するようにしましょう。