【URL was loaded over HTTPS】NGROKによる表示くずれを修正する方法

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

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

ただ、CSSやJSファイルはHTTP通信で送信されるため、ブラウザ上の表示がかなり崩れたりします。

NGROKによる表示くずれを手軽に修正する方法を解説します。

【URL was loaded over HTTPS】NGROKのURLで表示がくずれたときの対策

まず表示がくずれたサイトの原因をチェックしてみてください。

Consoleに次のようなエラーメッセージが表示されていれば、これから紹介する方法で修正できます。

URL was loaded over HTTPS, but requested an insecure script ‘URL/js/app.js’.
This request has been blocked;
the content must be served over HTTPS.

resources/layouts の中の app.blade.phpファイルをテンプレートに使っているとします。

app.blade.phpファイルを開きます。

上部に JavascriptとCSSファイルに関する設定があります。

これを、次のように書き替えます。

じゅんこ
じゅんこ

テストが終了したらまた元に戻さねばならないので、元のコードもコメントアウトして残しておくと良いですよ。

保存して、ブラウザを更新してみてください。

表示がもとに戻っていたら成功です。

NGROKによる表示崩れの原因と対策のポイント

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

本体はHTTPS通信で送信される

CSSやJavascriptファイルはHTTP通信で送信されてしまう

そこで今回、次のようなコードを使用しました。

{{ Request::server(‘HTTP_X_FORWARDED_PROTO’)==’https’
        ? str_replace(‘http’, ‘https’, asset(‘css/app.css’))
        : asset(‘css/app.css’)  }}”

「もしHTTPで送信された場合には、HTTPSに修正してね。そうでなければそのままでOKだよ。」という意味です。

三項演算子を使って条件式を作っていますが、構造は次のとおり。

【条件】 ? 【A】 : 【B】
もし条件にあえばAにする、そうでなければBにする

これによって、CSSやJavascriptファイルもHTTPS通信で送信できるため、表示エラーが治せます。

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

コメント

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