Q&A
＞Resource interpreted as Stylesheet but transferred with MIME type
これそのままで検索して出てくる情報では何か足りませんか？
あと画像でコードを提示されても再現確認できませんので、テキストベースでマークダウンにてご提示ください。
現在簡易的なCRUDアプリをJavaEE(Servlet)で作成しています。
アプリ起動後、アプリは立ち上がるものの、CSSが反映されない問題が浮上しました。
様々なサイトを元に改良してみたのですが、うまくいきませんでした。
ご返答いただけると幸いです。宜しくお願い致します。
試した内容としては、
Web.xml内に以下の記述を追記しました。
xml
1<mime-mapping> 2 <extension>css</extension> 3 <mime-type>text/css</mime-type> 4</mime-mapping>
develper toolsで調べたところ以下のような記述が出力されました。
Resource interpreted as Stylesheet but transferred with MIME type text/plain: "http://localhost:7777/library/css/bootstrap.min.css".localhost/:14
Resource interpreted as Stylesheet but transferred with MIME type text/plain: "http://localhost:7777/library/css/cover.css".
現在開発で利用しているjspファイルをファイル構造とjsp内のheadタグを共有いたします。
WebContent
|-jsp
| |- index.jsp
|-css
|- cssファイル等（bootstrap）
jsp
1<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 2<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 3<!DOCTYPE html> 4<html lang="ja"> 5 <head> 6 <meta charset="utf-8"> 7 <meta name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type"> 8 <!-- Bootstrap CSS--> 9 <link type="text/css" rel="stylesheet" href="<%=request.getContextPath()%>/css/bootstrap.min.css"> 10 <!-- jQuery --> 11 <script src="<%= request.getContextPath() %>/js/jquery.min.js"></script> 12 <!-- Bootstrap JavaScript--> 13 <script src="<%= request.getContextPath() %>/js/bootstrap.min.js"></script> 14 <link type="text/css" rel="stylesheet" href="<%= request.getContextPath() %>/css/cover.css"> 15 <title>図書館システム</title> 16 </head>
xml
1<?xml version="1.0" encoding="UTF-8"?> 2<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 3 xmlns="http://xmlns.jcp.org/xml/ns/javaee" 4 xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" 5 version="3.1"> 6 <display-name>library</display-name> 7 <welcome-file-list> 8 <welcome-file>/jsp/index.jsp</welcome-file> 9 </welcome-file-list> 10 <error-page> 11 <error-code>404</error-code> 12 <location>/jsp/error_page.jsp</location> 13 </error-page> 14 <error-page> 15 <error-code>502</error-code> 16 <location>/jsp/error_page.jsp</location> 17 </error-page> 18 <error-page> 19 <error-code>403</error-code> 20 <location>/jsp/error_page.jsp</location> 21 </error-page> 22 <error-page> 23 <exception-type>java.lang.RuntimeException</exception-type> 24 <location>/jsp/error_page.jsp</location> 25 </error-page> 26 <error-page> 27 <exception-type>javax.servlet.ServletException</exception-type> 28 <location>/jsp/error_page.jsp</location> 29 </error-page> 30 <mime-mapping> 31 <extension>css</extension> 32 <mime-type>text/css</mime-type> 33</mime-mapping> 34</web-app>
Resource interpreted as Stylesheet but transferred with MIME type
で確かに検索して、解決を試みたのですが、解決しなかったため質問させていただきました＞＜
画像失礼いたしました。ソース改めて挿入いたしました。
>で確かに検索して、解決を試みたのですが
では。その旨と調べたこと参考にした記事試したことを記載してください。
書いてないことをくみ取るのは他人にはできませんので。
ご指摘ありがとうございます！
試した内容①
Web.xmlファイル内に<mime-mapping>を追加
参考にしたサイト①
https://stackoverflow.com/questions/27677912/resource-interpreted-as-stylesheet-but-transferred-with-mime-type-text-html-is
試した内容②
windows内、windowsの機能よりインターネットインフォメーションサービス 静的なコンテンツを有効に変更しました。
参考にしたサイト②
https://stackoverflow.com/questions/41734976/resource-interpreted-as-stylesheet-but-transferred-with-mime-type-text-javascrip
ブラウザの開発者ツール＞networkにて、表示したページにて読み込む記述をしている bootstrap.min.css, jquery.min.js, bootstrap.min.js, cover.css の読み込み結果が出ているかと思いますが、これらはエラーがなく取得できているでしょうか。
また、cover.css の内容も質問に記載してくださり、さらに「突然適用されなくなった」前後の時系列（何をしたら適用されなくなったのか、何をするまでは適用されていたのか）も書くと、正確に伝わります。
A-pZさんご指摘ありがとうございます！
ステータスコード200と出ているのでおそらくは読み込まれていると思われます。
Priviewではなにも表示されません。
（私の解釈違いなら申し訳ございません。）
時系列に関しては細かく覚えていないです。
前日までは正常にCSSが反映されていたのに、次の日にはCSSが反映されなくなっていました。
詳細にありがとうございます。念のためですが、そのNetworkタブにて、cache disabledにチェックをつけてCSSやJavaScriptのキャッシュを無効化した上でリロードを行い、CSSやJavaScriptすべてのアクセス結果が出るようにしてください。
なおCSSが適用されないのは、interrupted とブラウザが出力しており、mime-typeとの不整合で返していると予想しますが、web.xmlで追加設定が効いていないと思われますので、お待ちください。
念のためですが、以下を教えてください
(1)web.xmlファイルは全部小文字ですよね？
(2)ポート7777なので、動作しているWebアプリケーションサーバ（コンテナ）も記載していただけますでしょうか。
A-pZさん、ありがとうございます！
cache disabled を有効化してリロードしましたが、上記の画面と変わりありませんでした。
またxmlファイルの全文を追加しました。
WebサーバーはEclipse内蔵のtomcatを採用しています。
web.xmlの記述をwelcome-pageだけにしたら動きました＞＜
お付き合いいただきありがとうございました！
おそらくWeb.xml内の記述に問題があったみたいです。
回答1件
0
自己解決
web.xmlの記述をwelcome-pageだけにしたら動きました＞＜
お付き合いいただきありがとうございました！
おそらくWeb.xml内の記述に問題があったみたいです。
xml
1<?xml version="1.0" encoding="UTF-8"?> 2<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" version="3.1"> 3 <display-name>library2</display-name> 4 <welcome-file-list> 5 <welcome-file>/jsp/index.jsp</welcome-file> 6 </welcome-file-list> 7</web-app>
投稿2020/09/24 01:03
総合スコア16
あなたの回答
tips
プレビュー
