Mixed Content Errorで悩まされたが、URLの記述が厳密にはおかしかった

Mixed Content Error （混在コンテンツ）とは？

例：Mixed Content Error（押してね）

Mixed Content: The page at 'https://googlesamples.github.io/web-fundamentals/fundamentals/security/prevent-mixed-content/xmlhttprequest-example.html' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://googlesamples.github.io/web-fundamentals/fundamentals/security/prevent-mixed-content/xmlhttprequest-data.js'. This request has been blocked; the content must be served over HTTPS.

簡単に言うと、ユーザがブラウザからhttpsでURLにアクセスしているが、ページ内部にhttpのリンクがありセキュリティ的によろしくないのでブラウザが警告やエラーを出すというものです（他にも例はあるかもしれません）。基本的にはhttpsで書き直してあげれば解決します。

以下、信頼できる情報です。
混合コンテンツとは Web Fundamentals
[混在（ミックス）コンテンツと CSP]
(https://rms.ne.jp/Introduction_to_https/mixed-content.html)

二種類の混在コンテンツ

理解するために一つ重要なことは、混在コンテンツは二種類あるということです。

• 混合アクティブコンテンツ： JavaScript、CSS、object、XMLHttpRequest (XHR)、iframe、font
• 混合パッシブコンテンツ： img

混合アクティブコンテンツはHTTPSページ全体や一部の機能を書き換えることができるコンテンツで危険なものです。一般的なブラウザではエラーとしてブロックされます。パッシブ混合コンテンツは、HTTPSページ全体の機能を書き換えることはできないコンテンツで、前者よりは危険度が低いので警告が出るのが通例かと思います。ブラウザによって挙動が変わる可能性があるので確認してみてください。

また、実害はなかったとしても画面上のURL近くにも警告マークが出たりするので、ユーザに安心して使ってもらうためには解消するのがよろしいかと思います。

エラーの原因は直接的なものではないかも

私の例では、ロードバランサ導入後に、それまで問題にならなかったMixed Content Errorが表面化することがありました。相対パス（プロトコルとホスト名などが省略）で書かれていました。Chrome Console で探ると、リクエストURLの末尾にスラッシュがついていたという凡ミスですが、Mixed Content エラーの内容とは直接は関係ないもので調査に少し時間をかけてしまったことがあります。

Example1: リクエストURLの末尾にスラッシュが付いていた

• bad: /api/from/js/to/laravel/server/

• good: /api/from/js/to/laravel/server

Example2: クエリパラメータの前に余計なスラッシュが付いていた

• bad: /api/from/js/to/laravel/server/?param=123

• good: /api/from/js/to/laravel/server?param=123

相対パスで原因不明のエラーに悩まれている方はURLを見直してみてください！

HTTPで絶対パスを記述している方は、置換などして直す必要があるかと思います。
参考：みんなのウェディングのウェブサービスを完全HTTPS化した流れを紹介！