フロントエンドの落とし穴 リソースはスタイルシートとして解釈されるが、MIMEタイプはtext/htmlで転送される。"<URL>". css スタイルの失敗
2022-01-21 09:40:18
フロントエンドの落とし穴 リソースはスタイルシートとして解釈されるが、MIMEタイプはtext/html: ""で転送される。
エラーメッセージ:以下
今日、tomcatにデプロイしたWebプロジェクトを実行したところ、以前はまだCSSスタイルがきちんと表示されていたのに、今日実行したら突然表示されなくなりました。ブラウザのコンソールを開くと、上の画像のようなメッセージが表示されました。
cssファイルがインポートされていることを確認した後、ウェブ上で多くの記事を検索し、最終的に以下のように問題の解決策を得ることができました。
.NETからjspページを削除します。
<!DOCTYPE html>
- 1
その後、再度cssスタイルを表示できることがわかりましたが、cssスタイルは表示されても
ウェブ上の理由のほとんどを最終的にまとめると
フィルターにひと手間加える response.setContentType("text/html;charset=UTF-8") とします。 こうすることで、レスポンスにあるcssのリクエストも解析のためにtext/html形式に設定され、ブラウザは上記の警告を表示するようになります。
ウェブでも、上記のような解決策がいくつか紹介されています。
まず1つ目。
String accept = request.getHeader("Accept");
response.setContentType(accept==null ? "text/html;charset=UTF-8":accept+";charset=UTF-8");
- 1
- 2
2番目。
cssのリクエストをインターセプトするために別のフィルタを書く @WebFilter("*.css")
そして、そのフィルターに
response.setContentType("text/css;charset=UTF-8");
You can try both of the above methods!
関連
-
[CSSチュートリアル】Pure CSSカスタム複数行抜け問題(原理から実装まで)
-
[CSSレイアウト例】float(フロート)、position(ポジション)プロパティの差分によるCSSレイアウト
-
[CSSチュートリアル】背景-位置の割合の原則の説明
-
[CSSチュートリアル]cssの位置固定コードで左右2重の位置決め
-
[CSSチュートリアル】子要素のmargin-topが親要素の移動を引き起こす問題解決
-
[CSSチュートリアル】インタビュー必見!聖杯レイアウトとダブルウィングレイアウトの違いとは?
-
[CSSチュートリアル】CSSで実現できるのなら、わざわざJavaScriptを使う必要はない
-
[CSSチュートリアル】テーブルの最大幅と最小幅の相性問題と解決策を解説
-
[CSSチュートリアル】CSS疑似要素を使って、連続する複数の要素のスタイルを制御する
-
[CSSチュートリアル】display:olck/noneでメニューバーを完成させる方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[CSSチュートリアル】よくある2D変換を5つ実現するCSS
-
[CSSチュートリアル】検索ボックスの非表示機能を実現するCSS(アニメーションの順送り・逆戻りシーケンス)
-
[CSSチュートリアル】overflow:hiddenの役割を解説(overflow hidden、clear float、外周マージンの崩れを解決する)。
-
[CSSチュートリアル】CSSのfloatとunfloatについて
-
[CSSチュートリアル】カラフルで知的なシャドウ効果を実現するCSS
-
[CSSチュートリアル】CSSでマウスの位置をマッピングし、マウスの動きでページ要素を制御する効果を実現する(コード例)
-
[CSSチュートリアル】BlazorでCSSを分離する
-
[css3】background属性の8つの属性値について解説(インタビュー記事)
-
[CSSチュートリアル]フレックス内のボタンを縦に中央寄せにしない意外な解決法
-
[CSSチュートリアル】Chromeのフォント最小12px制限の最終解決策