Q&A
Chromeの新タブなどで直接「https://unpkg.com/bootstrap/dist/css/bootstrap.min.css」とか「https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css」って入力したとき、cssファイルとしてダウンロードできていますか？ プロキシー環境下のサーバーとかで、プロキシーを越えられていない、なんてことはないでしょうか。
WEBアプリを制作し、デプロイを終え問題なくWEB上で動いていたのですが、ある日を境にWEBアプリのディスプレイが部分的に左寄りになってしまいました。調べるとbootstrap-vueのcssが読みこまれなくなっていたので、それが原因だと考えています。また、実装環境と開発環境で同じエラーが出ていたので、サーバー側に問題はないかと思っています。
開発環境ではdjangoのrunserverを使っています。
実装環境ではAWSのEC2でミドルサーバーにNginxとgunicornを使っています。
発生している警告
Resource interpreted as Stylesheet but transferred with MIME type text/plain: "https://unpkg.com/bootstrap/dist/css/bootstrap.min.css". Resource interpreted as Stylesheet but transferred with MIME type text/html: "https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css".
html
html
1<head> 2 <meta charset="UTF-8"> 3 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 4 <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" /> 5 <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" /> 6 <link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet"> 7 <link href="https://fonts.googleapis.com/css?family=Noto+Serif+JP" rel="stylesheet"> 8 {% block extra_head %}{% endblock %} 9 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script> 10 <script src="https://unpkg.com/vue-star-rating@1.7.0/dist/VueStarRating.umd.min.js"></script> 11 <script src="https://unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script> 12 <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script> 13 <script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script> 14 <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script> 15 <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script> 16 <script src="https://cdn.rawgit.com/SSENSE/vue-carousel/6823411d/dist/vue-carousel.min.js"></script> 17</head>
chromeのディベロッパーのネットワークを確認すると３０２が出ていました。
自分なりに調べたのですが、解決策が分かりませんでした。
お詳しい方がお見えになりましたら、ご助力いただけると幸いです。
至らない点が多々あるかと思いますがよろしくお願いします。
回答ありがとうございます。
両者とも検索をかけたところ、cssの内容が表示されました。ですのでファイルとしてダウンロードはされなかったということで間違い無いでしょうか？また、プロキシに関してですが、何も設定していなかったので、現状では問題ないかと考えています。
よろしくお願いします。
ご提示の「WEBアプリ」のリンクを拝見しましたが、当方の環境ではご提示のエラーを確認することができませんでした。
回答ありがとうございます。
確認なのですが、headerの文字は全て左寄りになっていましたか？
もしそうであれば、別の箇所が問題かもしれないので、もう少し調べてみます。
navbar の内容物のことでしたら、左寄せになっています。
では、別の場所に問題がありそうですね。もう少し調べてみます。
回答1件
0
自己解決
原因：CDNで読み込んでいたcssがバージョンの関係か、内容が変わっていたと考えられる。
解決策：バージョンを固定して記述することで解決したと考えられる。
###変更前
html
1<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
###変更後
html
1<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
ご協力いただきありがとうございました。
投稿2021/05/09 03:47
総合スコア2
あなたの回答
tips
プレビュー
