Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8725

Mixed Content: The page at 'https://〜〜〜' was loaded over HTTPS,というエラーが出た時の対処

$
0
0

あらすじ

サイトにjQueryを拡張するライブラリ(プラグイン)の一種でjQuery UIを利用しダイアログを表示しようとしたときに出たエラーです。

HTMLheader部分にライブラリを読み込むため、以下のような記述をプラスし

<link type="text/css" rel="stylesheet"
  href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" />

今回はherokuを利用してデプロイしました。

エラー内容

そうするとクリックしてもダイアログがうまく表示されず。

検証ツールでコンソールを見てみると赤文字でエラーの表示がでてました。

Mixed Content: The page at 'https://home-game-center.herokuapp.com/' was 
loaded over HTTPS, 
but requested an insecure stylesheet 'http://code.jquery.com/ui/1.12.1/themes/pepper-grinder/jquery-ui.css'.
This request has been blocked; the content must be served over HTTPS.

httpからのリンクなんで読み込めませんよ」とのことのようです。実際そのページだけ必要なものが読み込めていない。

調べてみると、『HTTPSHTTPの混合サイトで外部リンクが読み込めない』みたいです。

解決策

解決策としては
『(’https:/ or ‘http:/)は省略できる』
とのことなので記述を以下のようにしました。

<link type="text/css" rel="stylesheet"
  href="//code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" />

href=のあとのhttp:を省略して再度デプロイすると本番環境でも正常にダイアログが出て解決しました!

しかし今度はローカルではうまく動作せずになりましたが(涙)

参考

リンクの http: や https: を省略して現在のプロトコルでリンク先にアクセスさせる
https://qiita.com/arai-wa/items/d9b73539898d658b58c5


Viewing all articles
Browse latest Browse all 8725

Latest Images

Trending Articles

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>