Jqueryがテストサーバーで動いていたけど、本番環境で動かない場合
Jqueryが動かないこと、よくあります。
私も先日Jqueryが動かなくて困ったので原因と解決法を備忘録として残します。
解決法は一番下です。
目次
テストサーバーでは動いていたのに本番環境で動かない
状況としてはお客様のWebサイトを製作中、弊社テストサーバーで構築した後、お客様本番サーバーにアップロードしました。
しかし、テストサーバーでは動いていたのに本番サーバーではJqueryが動かない。
ファイルはまるまるコピーなのでパスが間違っていたり、他のJqueryと競合していることが原因だとは考えにくい。
エラーメッセージを見よう
最近のブラウザだと大体エラー状況を見ることができます。
下の画像はChoromeのコンソールです。
Jquery is not definedとは?
文字通りJqueryが定義されていませんということです。
このメッセージがでる場合はJqueryのパスが間違っていたりして読み込めていないことが多いです。
その事については1行目にも書いてあります。
Failed to load resource: the server responded with a status of 404 (Not Found)
簡単に言うとJqueryが読み込めませんでした、ということです。
HTTPSサーバーからJqueryを読み込もうとしていることが原因だった
弊社のテストサーバーはHTTPサーバーだったのですが、本番環境はHTTPSでした。
HTTPSの環境からhttp://ajax.googleapis.com/ajax/libs/jquery/◯◯/jqueryを読み込むとHTTPS経由で読み込まれます。
HTTPSというのは本来セキュアな通信なので、セキュアではないHTTPから操作できるようにすると問題が発生するみたいです。
Jquery読み込み部分の先頭「http:」の部分をけして「//ajax.goo~」とすれば無事Jqueryが読み込まれました。